使用React Router的服务器端渲染“浏览器历史需要DOM”

如何解决使用React Router的服务器端渲染“浏览器历史需要DOM”

我已经在互联网上扫描了两天，但无法了解使用react-routes实现SSR的要点。我花了5天的时间才能完全理解所有路线。但是现在我无法使用 react-routes 进一步了解。这是必要的详细信息-

server / server.js

import express from 'express';
import fs from 'fs';
import path from 'path';

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import {StaticRouter} from 'react-router-dom';

import App from '../src/App';

const PORT = process.env.PORT || 8080;

const app = express();

app.use(express.static(path.resolve('./build')))

app.get('*',(req,res) => {

    fs.readFile(path.resolve('./build/index.html'),'utf-8',(err,data) => {

    if (err) {
      console.log(err);
      return res.status(500).send('Some error happened');
        }

        const context = {};
        const app = ReactDOMServer.renderToString(
            <StaticRouter location={req.url} context={context}>
                <App />
            </StaticRouter>
        )
        
    return res.send(
      data.replace(
        '<div id="root"></div>',`<div id="root">${app}</div>`
      )
    );
    });
    
});

app.listen(PORT,() => {
  console.log(`App launched on ${PORT}`);
});

server / index.js

require('ignore-styles')

require('@babel/register')({
    ignore: [/(node_module)/],presets: ['@babel/preset-env','@babel/preset-react']
})

require('./server')

src / App.js

import React from "react";
import {BrowserRouter,Switch,Route,Link} from 'react-router-dom';
import "./App.css";

function App() {

  return (
    <BrowserRouter>
      <Switch>
        <Route path='/' exact component={() => <Link to='/about'>This is Home. Go to About.</Link>} />
        <Route path='/about' component={() => <Link to='/'>This is About. Go to Home.</Link>} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

src / index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

serviceWorker.unregister();

解决方法

从应用程序中删除BrowserRouter并将其放入索引文件中。

index.js

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

App.js

import React from "react";
import { Switch,Route,Link} from 'react-router-dom';
import "./App.css";

function App() {

  return (
      <Switch>
        <Route path='/' exact component={() => <Link to='/about'>This is Home. Go to About.</Link>} />
        <Route path='/about' component={() => <Link to='/'>This is About. Go to Home.</Link>} />
      </Switch>
  );
}

由于<App />包含BrowserRouter，因此您正在服务器中使用它。 BrowserRouter无法在服务器中处理，因为它需要DOM。

还要从StaticRouter而不是react-router导入react-router-dom。

您可以检查文档here

import { StaticRouter } from 'react-router';