非CRA搭建React项目react-router-dom v6多级路由404报错问题

问题原因 #

单层路径（如/add、/test）访问正常、多层嵌套路径（如/edit/:id匹配的编辑页）访问报静态资源404，核心问题是静态资源引用使用了相对路径：

• 当访问单层路径/add时，相对路径写法的main.js会被浏览器解析为/main.js，刚好能命中根目录下的打包资源，因此无报错
• 当访问多层路径/edit/123时，浏览器会基于当前路径层级拼接资源地址，把main.js解析为/edit/main.js，该路径下不存在对应资源，因此抛出404

配置中已开启的historyApiFallback: true仅负责前端路由刷新时让服务端统一返回index.html，无法解决静态资源相对路径的解析错误。现有react-router-dom v6路由配置符合写法规范，无需调整。

修复步骤 #

1. 修改webpack配置，指定静态资源的根引用路径
   打开webpack.config.js，在output配置块中新增publicPath: '/'字段，强制所有打包生成的静态资源路径从站点根目录开始解析，修改后的output配置如下：

output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
    publicPath: "/", // 新增该行配置
},

2. 修正入口HTML的资源引用路径
   打开项目public目录下的index.html文件，检查main.js的引用标签，必须使用根路径绝对写法，禁止使用相对路径：

错误写法（相对路径，会触发多层路由解析错误）：

<script src="main.js"></script>

正确写法（根路径绝对引用）：

<script src="/main.js"></script>

验证 #

修改完成后重启webpack devServer服务，再次访问/edit/1这类两层嵌套路由时，浏览器会直接从http://localhost:3000/main.js加载打包资源，不会再出现路径拼接错误，编辑页可正常渲染。

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