自定义Webpack配置下react-router-dom无法匹配/story/:id路由的问题

DevOps 小满

2026-8-21

解决自定义Webpack配置中react-router-dom带参数路由无法匹配的问题

问题根源

自定义Webpack配置时，Dev Server默认会根据URL路径去查找对应物理文件，但单页应用的路由属于前端路由，/story/:id这类路径并没有对应的真实文件，因此会返回404。而Create-React-App默认配置了historyApiFallback规则，自动处理这类前端路由的请求跳转。

解决方案

1. 配置Webpack Dev Server的`historyApiFallback`

在Webpack配置文件（通常为webpack.config.js）的devServer选项中添加historyApiFallback: true，让所有404请求都重定向到项目入口的index.html：

module.exports = {
  // ...其他配置项
  devServer: {
    historyApiFallback: true,
    // 其他Dev Server配置，比如端口、自动打开页面等
  }
};

2. 生产环境部署的补充配置

如果要将项目部署到生产环境，还需要对应服务器配置重定向规则，确保前端路由能正常工作：

Nginx：在站点配置中添加

location / {
  try_files $uri $uri/ /index.html;
}

Apache：在项目根目录的.htaccess文件中添加

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

3. 确认路由组件声明正确

检查App.js中的路由配置是否无语法错误，示例如下：

import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import Story from './Story';

function App() {
  return (
    <Routes>
      <Route path="/home" element={<Home />} />
      <Route path="/story/:id" element={<Story />} />
      <Route path="/" element={<Home />} /> {/* 可选：设置默认首页路由 */}
    </Routes>
  );
}

export default App;