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

Question

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

Error: Invariant failed: Browser history needs a 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 存储库中。如果有人可以提供帮助，谢谢！

这是存储库的 link： isomorphic-react

Answer 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;

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

Error with routing in isomorphic server-side react project

express

webpack

react-router

babeljs

react-dom-server