尽管所有反应路由器版本冲突，如何在反应中进行服务器端渲染？
Posted
技术标签:
【中文标题】尽管所有反应路由器版本冲突，如何在反应中进行服务器端渲染？【英文标题】：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 你是这个问题的主人吗？你有任何沙箱或源代码，以便我可以重现错误吗？以上是关于尽管所有反应路由器版本冲突，如何在反应中进行服务器端渲染？的主要内容，如果未能解决你的问题，请参考以下文章