尽管所有反应路由器版本冲突，如何做出反应服务器端渲染？
[英]How to do server side rendering in react despite all react router version conflicts?
问题描述
I am trying to server-side rendering with react and react-router-dom I've done this before but with the new version, it is throwing me an error You should not use Switch outside a Router I think it is a version conflict but is there a solution ( react-router-config - You should not use outside a (it is inside a Router!) ). 
我正在尝试使用react和react-routers-dom进行服务器端渲染我之前已经完成了这个但是使用新版本，它给我一个错误你不应该在路由器之外使用Switch我认为这是版本冲突但是有没有解决方案（ react-router-config - 你不应该在外面使用它（它在路由器里面！） ）。
server.js 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>SSR</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 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 的package.json
{
"name": "reactSSRwithCodeSplitting",
"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"
}
}
1 个解决方案
解决方案1
0 2019-08-16 10:30:46
Quick fix: 快速解决：
- Remove your
node_modules删除node_modules - Add
"react-router": "^5.0.1"to yourpackage.json将"react-router": "^5.0.1"到package.json - Re-install with
npm install.使用npm install重新npm install。
Ensure that react-router , react-router-config , react-router-dom are in the same version. 确保react-router ， react-router-config ， react-router-dom属于同一版本。
What is wrong? 怎么了？
When I try to reproduce your error, I figure out that your package.json in the question is missing react-router dependency, which makes me unable to start the server. 当我尝试重现您的错误时，我发现问题中的package.json缺少react-router依赖，这使我无法启动服务器。
And from your story, I guess that you have another version of react-router in your node_modules , which is out of sync with react-router-config and react-router-dom version 5.0.1. 从你的故事中，我猜你在node_modules有另一个版本的react-router ，它与react-router-config和react-router-dom版本5.0.1不同步。
So I try to reproduce the problem with this: 所以我尝试用这个重现问题：
"react-router": "^4.3.0",
"react-router-config": "^5.0.1",
"react-router-dom": "^5.0.1"
Which will lead to the problem you mentioned. 这会导致你提到的问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.