Express 同构服务器端项目中的路由错误_Express_Webpack_React Router_Babeljs_React Dom Server

Express 同构服务器端项目中的路由错误

express webpack

Express 同构服务器端项目中的路由错误,express,webpack,react-router,babeljs,react-dom-server,Express,Webpack,React Router,Babeljs,React Dom Server,我正在尝试使用同构的服务器端渲染来构建一个项目。由于某种原因，项目在添加路由后停止启动。浏览器抛出以下错误：错误：不变量失败：浏览器历史记录需要DOM 也许有人能告诉我那里出了什么问题下面是server.js代码： import express from "express"; import path from "path"; import React from "react"; import { StaticRouter } from "react-router"; import Reac

我正在尝试使用同构的服务器端渲染来构建一个项目。由于某种原因，项目在添加路由后停止启动。浏览器抛出以下错误：

错误：不变量失败：浏览器历史记录需要DOM

也许有人能告诉我那里出了什么问题

下面是server.js代码：

import express from "express";
import path from "path";
import React from "react";
import { StaticRouter } from "react-router";
import ReactDOMServer from "react-dom/server";
import App from "./src/App";

const app = express();

app.get('*', (req,res) => {
  const context = {};
  const data = ReactDOMServer.renderToString(
    <StaticRouter location={req.url} context={context}>
      <App />
    </StaticRouter>
  );
  const html = `
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>  
  </head>
  <body>
    <div id="root">${data}</div>
    <script src="bundle.js"></script>
  </body>
  </html>
  `;
  res.send(html);
});

app.use( express.static( path.resolve( __dirname, "dist" ) ) );

app.listen(3000);

从“express”导入express；
从“路径”导入路径；
从“React”导入React；
从“react router”导入{StaticRouter}；
从“react dom/server”导入ReactDOMServer；
从“/src/App”导入应用程序；
常量app=express（）；
应用程序获取（“*”，（请求，请求）=>{
const context={}；
const data=ReactDOMServer.renderToString(
没关系，我想好了。
必须将browswrouter容器放在index.js中，而不是App.jsx中
下面是更正后的index.js：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from "react-router-dom";

ReactDOM.hydrate(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

从“React”导入React；
从“react dom”导入react dom；
从“./App”导入应用程序；
从“react router dom”导入{BrowserRouter}；
水合物(
,
document.getElementById（“根”）
);

下面是修正后的App.jsx：
import React, { Component } from 'react';
import { Switch, Route } from "react-router-dom";
import First from './First';
import Second from './Second';
import Home from './Home';

class App extends Component {
  render() {
    return (
      <div>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/first" component={First} />
          <Route path="/second" component={Second} />
        </Switch>
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“react router dom”导入{Switch，Route}；
首先从“./First”导入；
从“./Second”导入秒；
从“./主页”导入主页；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

import React, { Component } from 'react';
import { Switch, Route } from "react-router-dom";
import First from './First';
import Second from './Second';
import Home from './Home';

class App extends Component {
  render() {
    return (
      <div>
        <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/first" component={First} />
          <Route path="/second" component={Second} />
        </Switch>
      </div>
    );
  }
}

export default App;