面试题：React Router在服务端渲染中的基本配置

主要步骤

安装依赖：在项目中安装react-router相关包，包括react-router-dom（用于客户端路由）和react-router-server（用于服务端路由）。

npm install react-router-dom react-router-server

客户端路由配置：在客户端代码（通常是index.js）中配置路由。例如：

import React from 'react';
import ReactDOM from'react-dom';
import { BrowserRouter as Router, Routes, Route } from'react-router-dom';
import Home from './components/Home';
import About from './components/About';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Router>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  </Router>
);

服务端路由配置：在服务端代码（例如server.js）中配置路由。

import express from 'express';
import React from'react';
import { renderToString } from'react-dom/server';
import { StaticRouter } from'react-router-server';
import { Routes, Route } from'react-router-dom';
import App from './App';
import Home from './components/Home';
import About from './components/About';

const app = express();

app.get('*', (req, res) => {
  const context = {};
  const html = renderToString(
    <StaticRouter location={req.url} context={context}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </StaticRouter>
  );
  // 这里可以根据context来处理重定向等情况
  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>SSR with React Router</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script src="/client.js"></script>
      </body>
    </html>
  `);
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

整合客户端和服务端：确保客户端和服务端的路由配置一致，这样在服务端渲染和客户端激活时，路由行为能保持一致。

关键代码解释

客户端BrowserRouter：BrowserRouter（通常使用别名Router）用于在客户端处理基于浏览器的历史记录API，管理路由状态。Routes和Route组件用于定义不同路径对应的组件。
服务端StaticRouter：StaticRouter用于服务端渲染，它接收当前请求的location（即req.url），并根据路由配置渲染相应组件。context对象可以用于处理重定向等情况。在渲染完成后，将渲染结果嵌入到HTML模板中返回给客户端。

星途面试题库

面试题：React Router在服务端渲染中的基本配置

知识考点

面试题答案

主要步骤

关键代码解释