同构服务器端反应项目中的路由错误答案

【问题标题】：Error with routing in isomorphic server-side react project同构服务器端反应项目中的路由错误
【发布时间】：2020-01-15 14:03:09
【问题描述】：

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

错误：不变量失败：浏览器历史记录需要一个 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);

App.jsx 代码：

import React, { Component } from 'react';
import { BrowserRouter, 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>
        <BrowserRouter>
          <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/first" component={First} />
            <Route path="/second" component={Second} />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

export default App;

这里有很多代码和文件，但我把它放在了 Github 存储库中。如果有人可以提供帮助，谢谢！

这里是存储库的链接： isomorphic-react

【问题讨论】：

标签： express webpack react-router babeljs react-dom-server

【解决方案1】：

没关系，我想通了。必须将 BrowswrRouter 容器放在 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")
);

这里更正了 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;

【讨论】：