5

我正在尝试使用 react 和 react-router-dom 进行服务器端渲染我之前已经这样做了，但是对于新版本，它给我一个错误你不应该在路由器之外使用 Switch我认为这是一个版本冲突但是是否有解决方案（react-router-config - 您不应该在 a 外部使用（它在路由器内部！））。

服务器.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

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

            }
        ]
    }
]

包.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"
  }
}
4

1 回答 1

0

快速解决：

  1. 删除您的node_modules
  2. 添加"react-router": "^5.0.1"到您的package.json
  3. 重新安装npm install。

确保 , react-router,react-router-config是react-router-dom同一版本。

怎么了？

当我尝试重现您的错误时，我发现您package.json在问题中缺少react-router依赖项，这使我无法启动服务器。

从你的故事来看，我猜你的react-routerin有另一个版本，它与5.0.1 版本node_modules不同步。react-router-configreact-router-dom

所以我尝试用这个重现问题：

"react-router": "^4.3.0",
"react-router-config": "^5.0.1",
"react-router-dom": "^5.0.1"

这将导致您提到的问题。

于 2019-08-16T10:30:46.127 回答