create-react-app集成React Router服务端路由配置问题排查

核心解决方案 #

将express.static('./build')中间件放在服务端代码的最开头，确保静态资源优先被处理，再用通配路由*处理所有SPA路由请求，即可同时解决路由跳转和hydrate失效的问题。

问题根源分析 #

你遇到的两种异常本质都是服务端请求处理顺序错误导致的：

1. 路由正常但功能失效：当通配路由*放在静态资源中间件前面时，所有请求（包括JS/CSS等静态资源请求）都会被SSR路由逻辑捕获，返回的是渲染后的HTML而非真正的静态资源文件。浏览器无法加载正确的客户端代码，自然无法完成hydrate，导致交互、样式、数据请求全部失效。
2. 功能正常但路由失效：当仅配置根路径/的SSR路由时，只有首页请求会被处理，其他路由请求找不到对应的处理逻辑，直接返回404；同时静态资源虽然能正常加载，但SPA路由无法在服务端被捕获，刷新或直接访问子路由就会报错。

完整最优配置示例（server/index.js） #

const express = require('express');
const React = require('react');
const { renderToString } = require('react-dom/server');
const { StaticRouter } = require('react-router-dom/server');
const App = require('../src/App').default;
const path = require('path');
const fs = require('fs');

const app = express();

// 核心：优先处理静态资源，放在所有路由逻辑之前
app.use(express.static(path.resolve(__dirname, '../build')));

// 处理所有SPA路由请求，完成服务端渲染
app.get('*', (req, res) => {
  const html = renderToString(
    <StaticRouter location={req.url}>
      <App />
    </StaticRouter>
  );

  // 读取build目录下的index.html模板，替换SSR内容
  const template = fs.readFileSync(path.resolve(__dirname, '../build/index.html'), 'utf8');
  const finalHtml = template.replace('<!-- SSR_CONTENT -->', html);

  res.send(finalHtml);
});

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

额外注意事项 #

• 客户端挂载要使用hydrateRoot（React 18+），确保和服务端渲染的DOM匹配：

  // src/index.tsx
  import { hydrateRoot } from 'react-dom/client';
  import { BrowserRouter } from 'react-router-dom';
  import App from './App';
  
  hydrateRoot(
    document.getElementById('root')!,
    <BrowserRouter>
      <App />
    </BrowserRouter>
  );
  

• 服务端和客户端的路由配置必须完全一致（比如src/routes.tsx），避免SSR渲染内容和客户端路由不匹配导致的hydrate警告。
• 无需切换到Next.js，现有CRA通过调整服务端中间件顺序即可低成本实现SSR路由，满足SEO需求。

内容的提问来源于stack exchange，提问作者Tyler