React Router 6.4.3路由报错：GET /chat返回Page not found求助

问题根源 #

直接在浏览器地址栏输入/chat或刷新页面时，浏览器会向Express服务器发送GET /chat请求，但你的Express服务器未配置该路由，因此返回404。React Router的客户端路由仅在前端应用已加载后，通过Link组件跳转时才生效，不会触发服务器请求。

解决方案 #

1. 配置Express服务器返回前端入口文件

在所有API路由之后，添加一个通配符路由，让所有非API请求都返回React应用的入口HTML文件（如public/index.html）：

const path = require('path');
const express = require('express');
const app = express();

// 先处理API路由（如果有）
// app.use('/api', yourApiRouter);

// 托管静态资源（如打包后的JS、CSS文件）
app.use(express.static(path.join(__dirname, 'public')));

// 所有其他请求返回React入口文件，交由客户端路由处理
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.listen(5000, () => console.log('服务器运行在端口5000'));

2. 检查React Router配置（v6.4+）

确保使用正确的路由配置方式，两种写法均可：

方式一：使用createBrowserRouter（v6.4推荐）

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import App from './App';
import Chat from './Chat';

const router = createBrowserRouter([
  { path: '/', element: <App /> },
  { path: '/chat', element: <Chat /> },
]);

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

方式二：使用BrowserRouter（兼容旧写法）

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import App from './App';
import Chat from './Chat';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />} />
        <Route path="/chat" element={<Chat />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);

3. 配置Webpack确保资源路径正确

• 打包时设置publicPath: '/'，避免资源路径错误：

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js',
    publicPath: '/' // 关键配置
  },
  // 开发服务器配置（使用webpack-dev-server时）
  devServer: {
    historyApiFallback: true, // 让dev-server返回入口文件给所有404请求
    static: path.join(__dirname, 'public'),
    port: 3000,
    // 代理API请求到Express服务器
    proxy: { '/api': { target: 'http://localhost:5000', changeOrigin: true } }
  },
  // ...其他loader、插件配置
};

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