React Router路由失效：访问/about跳转至Node服务器而非前端路由

• 确认Express路由顺序
  Express路由匹配是从上到下执行的，必须保证静态资源托管、API路由在通配路由之前定义，否则会导致前端路由请求被提前拦截。正确的顺序示例：

  const path = require('path');
  const express = require('express');
  const app = express();
  
  // 先托管Webpack打包后的静态资源目录
  app.use(express.static(path.join(__dirname, 'dist')));
  
  // 再定义后端API路由
  app.get('/api/xxx', (req, res) => {
    // API逻辑
  });
  
  // 最后处理所有前端路由，返回index.html
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist', 'index.html'));
  });
  

• 检查Webpack的publicPath配置
  在Webpack配置文件中，将output.publicPath设为'/'，确保打包后的资源以根路径加载，避免刷新页面时资源路径错误：

  module.exports = {
    // 其他配置...
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
      publicPath: '/'
    }
  };
  

• 验证BrowserRouter的配置
  确保BrowserRouter没有错误设置basename（除非你的应用部署在子路径），保持根路径匹配：

  import { BrowserRouter, Routes, Route } from 'react-router-dom';
  import Home from './Home';
  import About from './About';
  
  function App() {
    return (
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </BrowserRouter>
    );
  }
  

• 确认index.html的资源引用路径
  打包后的index.html中，脚本引用必须是根路径形式，比如<script src="/bundle.js"></script>，而非相对路径（./bundle.js）。Webpack的publicPath配置正确时会自动生成该路径。

• 确保sendFile使用绝对路径
  调用res.sendFile时必须使用绝对路径，通过path.join拼接目录，避免因相对路径导致服务器找不到index.html文件：

  // 错误示例：相对路径可能导致文件找不到
  // res.sendFile('./dist/index.html');
  
  // 正确示例：绝对路径
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
  

内容的提问来源于stack exchange，提问作者Jose Cabrera Zuniga