使用 React Router "Browser history needs a DOM" 进行服务器端渲染

Question

我在互联网上浏览了两天，但我不知道用react路由实现SSR的要点。我花了5天的时间才在没有路线的情况下理解这一切。但现在我无法进一步理解使用反应路线。以下是必要的详细信息-

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();

Answer 1

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

index.js

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

应用程序.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。

另外，从react-router而不是react-router-dom导入StaticRouter。

你可以在这里查看文档

import { StaticRouter } from 'react-router';