关键词：
【中文标题】尽管所有反应路由器版本冲突，如何在反应中进行服务器端渲染？【英文标题】：How to do server side rendering in react despite all react router version conflicts? 【发布时间】：2019-12-18 05:39:21 【问题描述】：我正在尝试使用 react 和 react-router-dom 进行服务器端渲染，但在新版本中，它给我一个错误 你不应该在路由器之外使用 Switch 我认为是版本冲突，但有解决方案吗（react-router-config - You should not use outside a (it is inside a Router!)）。
server.js
import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from '../client/src/AppRoutes';
import StaticRouter from 'react-router-dom';
import renderRoutes from 'react-router-config'
const app = express();
app.get('*', (req, res) =>
const routerContext = ;
res.send(`
<!doctype html>
<html lang="en">
<head>s-s-r</head>
<body>
<div id="root">$ReactDOMServer.renderToString(
<StaticRouter location=req.url context=routerContext>
<div>renderRoutes(App)</div>
</StaticRouter>
)</div>
<!-- <script src="/dist/main.js"></script>-->
</body>
</html>
`);
);
app.listen(3000, (error) =>
if (error)
return console.log('something bad happened', error);
console.log("listening on " + 3000 + "...");
);
AppRoutes.js
import PageA from './Container/PageA';
import PageB from './Container/PageB';
import Home from './Container/Home'
import MainPage from './Container/MainPage';
export default [
...MainPage,
routes:[
...Home,
path:'/',
exact:true
,
...PageA,
path:'/a',
exact:true
,
...PageB,
path:'/b',
exact:true
]
]
package.json
"name": "reacts-s-rwithCodeSplitting",
"version": "1.0.0",
"description": "",
"main": "server/server.js",
"scripts":
"test": "babel-node server/index.js",
"start": "nodemon server/index.js",
"build": "babel server --out-dir ./dist --source-maps",
"serve": "node ./dist/index.js"
,
"keywords": [],
"author": "",
"license": "ISC",
"dependencies":
"express": "^4.17.1",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-loadable": "^5.5.0",
"react-router-config": "^5.0.1",
"react-router-dom": "^5.0.1"
,
"devDependencies":
"@babel/cli": "^7.5.5",
"@babel/core": "^7.5.5",
"@babel/node": "^7.5.5",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "*",
"@babel/register": "^7.5.5",
"chai": "^4.2.0",
"nodemon": "^1.19.1"
【问题讨论】：
我知道要求可能有点过分，但您能设置一个codesandbox.io 以便我们测试和修复吗？无论如何，它似乎可能是versioning of react-router？ 【参考方案1】：快速修复：
-
删除您的
node_modules
将"react-router": "^5.0.1" 添加到您的package.json
使用npm install重新安装。
确保react-router、react-router-config、react-router-dom 是同一版本。
怎么了？
当我尝试重现您的错误时，我发现问题中的 package.json 缺少 react-router 依赖项，这使我无法启动服务器。
从你的故事来看，我猜你的node_modules 中有另一个版本的react-router，它与react-router-config 和react-router-dom 5.0.1 版本不同步。
所以我尝试用这个重现问题：
"react-router": "^4.3.0",
"react-router-config": "^5.0.1",
"react-router-dom": "^5.0.1"
这会导致你提到的问题。
【讨论】：
我进行了所有更改，但仍然收到此错误Error: Invariant failed: You should not use <Switch> outside a <Router>
@Nane 你是这个问题的主人吗？你有任何沙箱或源代码，以便我可以重现错误吗？如何在创建反应应用程序中进行应用程序版本控制？
】如何在创建反应应用程序中进行应用程序版本控制？【英文标题】：Howtodoappversioningincreatereactapp?【发布时间】：2020-05-1514:55:03【问题描述】：我需要在页脚中以x.y.z格式显示我的react应用的version。每次部署应用程序时，我都需... 查看详情
如何在反应路由器中调用阿波罗客户端 useQuery？
】如何在反应路由器中调用阿波罗客户端useQuery？【英文标题】：HowtocallapolloclientuseQueryinreactrouter?【发布时间】：2021-06-2803:56:02【问题描述】：我在使用GraphQL进行React路由时遇到了奇怪的情况。我在/usersurl中有一个用户，当我第... 查看详情
升级本机反应时如何解决“project.pbxproj”文件中的冲突？
】升级本机反应时如何解决“project.pbxproj”文件中的冲突？【英文标题】：Howtoresolveconflictsin`project.pbxproj`filewhileupgradingreactnative?【发布时间】：2019-02-0113:39:42【问题描述】：我正在使用Xcode9.4并且当前反应原生版本@0.54.4我想将... 查看详情
反应如何在 redux-saga 中导航路由器？
】反应如何在redux-saga中导航路由器？【英文标题】：reacthowtonavigaterouterinredux-saga?【发布时间】：2018-04-1515:48:42【问题描述】：版本：“react-router-dom”：“^4.1.2”，"react-router-redux":"^5.0.0-alpha.8",我可以通过这种方式在我的组件中... 查看详情
如何在反应路由器 DOM 版本 6 中设置条件？
】如何在反应路由器DOM版本6中设置条件？【英文标题】：howtosetconditioninreactrouterDOMversion6?【发布时间】：2022-01-2021:01:31【问题描述】：我想把这个用reactrouterv5写的代码转换成v6但是我不知道怎么做，一般我想设置如果用户没有... 查看详情
我如何使用服务器上的反应路由器处理所有可能的路由？
】我如何使用服务器上的反应路由器处理所有可能的路由？【英文标题】：howdoihandleeveryroutepossiblewithareactrouterattheserver?【发布时间】：2015-06-0916:29:34【问题描述】：关注readmeinthereact-router：varroutes=(<Routename="app"path="/"handler=App&g... 查看详情
如何在带有 koa 的反应路由器中使用浏览器历史记录
】如何在带有koa的反应路由器中使用浏览器历史记录【英文标题】：HowtouseBrowserhistoryinreactrouterwithkoa【发布时间】：2016-12-1512:20:11【问题描述】：在快递中，我们可以只使用以下代码来处理请求。当请求未被路由器处理时，服务... 查看详情
如何在升级本机时解决`project.pbxproj`文件中的冲突？(代码片段)
...不理想，但它确实意味着你应该能够在Xcode中打开项目，尽管你的项目可能还没有运行-只是。如果您不清楚要保留哪个版本，我会保留我们的版本，因为这是您的project.pbxproj的原始版本。来自documentation：您可以将“我们的”视... 查看详情
如何使用反应路由器生成站点地图
】如何使用反应路由器生成站点地图【英文标题】：Howtogeneratesitemapwithreactrouter【发布时间】：2016-08-2912:29:02【问题描述】：我试图弄清楚如何在reactJS服务器端（快速）网络应用程序中动态生成站点地图。我正在使用反应路由器... 查看详情
如何在 GAE 中设置路由以进行反应？在基本 create-react-app 上的 GAE 中，通过 URL 直接路由到 react-router-dom 路由失败？
】如何在GAE中设置路由以进行反应？在基本create-react-app上的GAE中，通过URL直接路由到react-router-dom路由失败？【英文标题】：HowdoIsetuproutingforreactinGAE?Directlyroutingtoreact-router-domroutesviaURLfailsinGAEonbasiccreate-react-app?【发布时间】：2019... 查看详情
反应路由和django url冲突
...问题描述】：我使用reactjs作为前端，django作为后端。React路由器用于路由。当我刷新由反应路由器路由的页面时，我得到django404PageNotFounderror。如果我刷新主页，我不会收到任何此类错误，因为主页也是由django模板使用其url呈现... 查看详情
重定向反应路由器中的所有路由
】重定向反应路由器中的所有路由【英文标题】：Redirectallroutesinreactrouter【发布时间】：2018-08-1321:17:08【问题描述】：我有一个React/Redux应用程序，如果用户在再次登录时尚未完成注册过程，我希望他们被重定向到他们所在步骤... 查看详情
如何在本机反应中进行条件渲染
】如何在本机反应中进行条件渲染【英文标题】：Howtodoconditionalrenderinginreactnative【发布时间】：2019-04-0413:44:49【问题描述】：如何在超过1个条件的reactnative中进行条件渲染？以下是我的部分代码索引.then(response=>response.json()).th... 查看详情
使用反应路由器 v6 的反应嵌入式登录实现
】使用反应路由器v6的反应嵌入式登录实现【英文标题】：Reactembeddedloginimplementationusingreactrouterv6【发布时间】：2022-01-1010:25:42【问题描述】：我正在尝试在React中设置嵌入式登录实现，除了我正在遵循的教程当前使用的是以前版... 查看详情
如何在反应路由器的登录页面中隐藏导航栏
】如何在反应路由器的登录页面中隐藏导航栏【英文标题】：Howtohidenavbarinloginpageinreactrouter【发布时间】：2018-04-2704:04:03【问题描述】：我想在登录页面中隐藏导航栏。我确实做到了，但是我在其他页面上看不到导航栏。此代码... 查看详情
如何通过在反应路由器 v4 中单击按钮来导航路径？
】如何通过在反应路由器v4中单击按钮来导航路径？【英文标题】：Howtonavigateonpathbybuttonclickinreactrouterv4?【发布时间】：2017-12-0606:21:35【问题描述】：我在react-router-dom中有这个路径：<BrowserRouter><div><Routeexactpath=\'/(index... 查看详情
如何在反应路由器dom v4中获取组件中的参数？
】如何在反应路由器domv4中获取组件中的参数？【英文标题】：Howtogetparamsincomponentinreactrouterdomv4?【发布时间】：2017-11-1206:38:57【问题描述】：我有这个代码：<BrowserRouter><Routepath="/(:filter)?"component=App/></BrowserRouter>根... 查看详情
如何在反应路由器中的每次路由更改时监听窗口负载？
】如何在反应路由器中的每次路由更改时监听窗口负载？【英文标题】：HowdoIlistenforwindowloaduponeachroutechangeinreactrouter?【发布时间】：2019-04-1211:59:18【问题描述】：我正在使用具有多个路由的react-router构建一个项目。代码如下所... 查看详情