React使用Found路由传递含点特殊字符参数报错的解决方案

我之前也碰到过一模一样的情况——当传递像CD.PLP.100.2011这种带点的ID作为路由参数时，webpack-dev-server会误把它当成静态资源请求，而不是交给前端路由处理，所以才会抛出Cannot GET /app/bill/CD.PLP.100.2011的错误，去掉点后能正常运行也验证了这一点（毕竟不带点的路径不会被判定为静态文件）。

你的路由配置<Route path="/bill/:id" Component={Bill}>本身完全没问题，问题确实出在webpack-dev-server的默认规则上。要解决这个问题，只需要修改webpack-dev-server的配置，禁用它对带点路径的特殊处理：

在你的webpack配置文件中，找到devServer配置项，添加historyApiFallback的disableDotRule设置：

devServer: {
  // 保留你的其他配置
  historyApiFallback: {
    disableDotRule: true
  }
}

这个配置会告诉webpack-dev-server，不要把带点的路径当成静态文件，而是按照前端路由的规则去处理，这样你的/bill/:id路由就能正确匹配包含点的ID参数了。

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