Question

我正在尝试将我的CRA ReactJS应用程序转换为SSR。我正在遵循指南，因此我并不完全了解它的每个方面。所以我的问题是它引发以下错误：

Invariant Violation: Browser history needs a DOM

我了解我需要删除BrowserRoute，但是同时我需要使用它（如果可以的话，请选择其他方法）。我确实进行了搜索，发现了很多类似的问题，但没有一个对我有用。

这是我的App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
require('dotenv').config();

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      ...
    }
  }
  render() {
    return (
      <Router>
        ...
        <li className="nav-item">
           <Link to={'/'} className="nav-link">Page1</Link>
         </li>
         <li className="nav-item">
           <Link to={'/page2'} className="nav-link">Page2</Link>
         </li>
        ...
          <Switch>
            <Route exact path='/' component={page1} />
            <Route exact path='/page2' component={page2} />
          </Switch>
       ...
      </Router>
    );
  }
}

export default App;

和服务器js

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

...
export default (req, res, next) => {
    const filePath = path.resolve(__dirname, '..', '..', 'build', 'index.html');
    fs.readFile(filePath, 'utf8', (err, htmlData) => {
        if (err) {
            console.error('err', err);
            return res.status(404).end()
        }
        const context = {};
        const html = ReactDOMServer.renderToString(
            <StaticRouter location={req.url} context={context}>
                <App />
            </StaticRouter>
        );
        return res.send(
            htmlData.replace(
                '<div id="root"></div>',
                `<div id="root">${html}</div>`
            )
        );
    });
}
...

ReactJS SSR BrowserRouter问题

0 个答案: