react-router-config嵌套带参路由访问返回404问题如何解决

配置错误排查点 #

• 路由配置存在语法错误：/child/:id对应的配置项中，component: Test后缺少英文逗号，导致整个路由配置解析异常，无法正确匹配带参数的路由。
  修正后的对应配置片段如下：

{
  path: "/child/:id",
  component: Test,
  exact: true
}

• 根路径配置校验：检查PATH.ROOT的取值是否为/，避免根路径配置异常影响路由匹配优先级。
• 版本兼容校验：react-router v6已经移除了对react-router-config的官方支持，若你使用的是v6及以上版本的react-router，需要改用useRoutes API配置路由，旧版本的renderRoutes无法适配v6的路由规则。

webpack配置关联说明 #

如果本地开发环境下修正上述问题后，直接访问/child/123仍然返回404，属于webpack devServer的配置问题：
webpack devServer默认会将访问路径作为静态资源路径查找，BrowserRouter模式下的前端路由需要配置所有请求回退到index.html才能正常生效，需要在webpack配置中添加如下规则：

module.exports = {
  // 其余webpack配置
  devServer: {
    historyApiFallback: true
  }
}

如果是打包后部署到生产环境出现404，和webpack本身无关，需要在对应的服务端（Nginx、Apache等）配置路由回退规则即可。

内容的提问来源于stack exchange，提问作者Андрей Мельник