React Router 6带小数的末尾路径参数无法正常工作的原因

问题描述 #

使用React Router 6的useRoutes配置路由后，访问不带末尾斜杠的路径/app/1.1.1时浏览器抛出Cannot get /app/1.1.1错误，但带末尾斜杠的/app/1.1.1/可以正常访问。相关配置如下：

路由代码 #

const App = () => {
  const routes = useRoutes([
    {
      path: '/',
      element: <h1>Hello World</h1>
    },
    {
      path: '/app/:version',
      element: <AppUI />
    }
  ])
  return (
    <div>
      {routes}
    </div>
  )
}

根组件渲染代码 #

const root = createRoot(document.querySelector('#app'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Webpack配置 #

module.exports = {
  entry: './src/index.tsx',
  devtool: 'source-map',
  output: {
    publicPath: '/',
    path: path.join(__dirname, '/build'),
    filename: 'index.[hash].js',
  },
  devServer: {
    host: 'localhost',
    port: 3003,
    open: true,
    historyApiFallback: true,
  },
  module: [...],
  plugins: [...], 
}

注：你问题中提到访问/path/1.1.1，但路由配置的是/app/:version，推测是笔误，实际应为/app/1.1.1。

原因分析 #

这个问题的核心在于webpack-dev-server的historyApiFallback默认行为：

• 当路径中包含点（.）时，浏览器会默认将其识别为静态资源请求（比如1.1.1看起来像版本号或文件后缀）。
• historyApiFallback默认不会重写这类带点的路径，它会尝试去服务器上寻找对应文件，找不到就返回404错误。
• 而带末尾斜杠的/app/1.1.1/会被服务器识别为目录请求，historyApiFallback会正常将其重定向到入口文件，由React Router处理路由。

Codesandbox能正常运行是因为它的内置服务器对这类路径的处理逻辑和webpack-dev-server默认配置不同。

解决办法 #

修改webpack-dev-server的historyApiFallback配置，让它处理带点的路径，有两种方式：

方式1：禁用点规则 #

将historyApiFallback设为对象，开启disableDotRule：

devServer: {
  host: 'localhost',
  port: 3003,
  open: true,
  historyApiFallback: {
    disableDotRule: true // 允许路径中包含点
  },
},

方式2：配置重写规则 #

如果需要更精细的控制，可以添加重写规则，将所有匹配的路径指向入口文件：

devServer: {
  host: 'localhost',
  port: 3003,
  open: true,
  historyApiFallback: {
    rewrites: [
      { from: /^\/app\/.*$/, to: '/' } // 匹配所有/app开头的路径，重定向到根入口
    ]
  },
},

修改配置后重启webpack-dev-server，访问/app/1.1.1就能正常由React Router处理了。

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