Node.js 使用React Router进行服务器端渲染；浏览器历史记录需要一个DOM“；

我已经在互联网上浏览了两天，但我不知道用反应路线实施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}`);
});

require('ignore-styles')

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

require('./server')

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;

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

src/App.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}`);
});

require('ignore-styles')

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

require('./server')

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;

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

从“React”导入React；
从“react router dom”导入{BrowserRouter，Switch，Route，Link}；
导入“/App.css”；
函数App（）{
返回(
这是家。转到大约。}/>
这是关于。回家。}/>
);
}
导出默认应用程序；

src/index.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}`);
});

require('ignore-styles')

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

require('./server')

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;

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

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
ReactDOM.hydrate（，document.getElementById（'root'）；
serviceWorker.unregister（）；

从应用程序中删除

浏览器路由器

，并将其放入索引文件中

index.js

---

有什么区别？它仍然通过水合物。服务器中未运行

水合物

功能。它在客户端（浏览器）中运行。无论如何，他在他的server.js文件中使用了react router dom，我认为这就是问题所在。哦！基本上，StaticRouter在服务器上工作，BrowserRouter在客户端工作。就这样。由于BrowserRouter隐式地从客户端的

window.location

获取位置，因此我们需要显式地将位置传递给StaticRouter。在那之后，一切都是一样的。