React Router多级路径报错：bundle.js 404未找到求助

这个问题和react-router本身无关，核心是静态资源的路径解析错误。

为什么会出现404？ #

当路由是/admin时，浏览器当前路径是http://localhost:8080/admin，如果index.html里以相对路径引入bundle.js，浏览器会解析为http://localhost:8080/bundle.js（因为/admin是一级路径，相对向上跳转一级就是根目录）；但路由变成/admin/all时，浏览器当前路径是http://localhost:8080/admin/all，相对路径引入的bundle.js会被解析为http://localhost:8080/admin/bundle.js——而你的bundle.js实际打包在根目录的dist文件夹下，所以自然返回404。

再看你的webpack配置：

output: { path: path.resolve('dist'), filename: '/bundle.js' },

这里filename用了绝对路径前缀/，但未配置publicPath，导致webpack-dev-server或生产环境部署时，静态资源的请求路径会依赖当前页面的路由路径，最终引发解析错误。

解决方法（两种任选其一即可） #

方法1：配置webpack的publicPath

修改webpack.config.js的output配置，添加publicPath: '/'，强制所有静态资源从根目录加载：

output: {
  path: path.resolve('dist'),
  filename: 'bundle.js',
  publicPath: '/'
}

publicPath会告诉webpack，所有输出的静态资源都以根路径作为基准URL，这样不管当前路由是什么，浏览器都会请求http://localhost:8080/bundle.js。

方法2：在index.html里用绝对路径引入bundle.js

确保你的index.html中引入bundle.js的脚本标签使用绝对路径：

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

这样浏览器会直接从根目录请求资源，不受当前路由路径的影响。

额外注意事项（避免后续路由问题） #

如果你使用的是BrowserRouter，生产环境部署时还需要配置服务器的historyApiFallback（比如webpack-dev-server设置historyApiFallback: true，Nginx配置try_files指向index.html），否则直接访问/admin/all这类嵌套路由时，服务器会返回404页面。不过你当前的核心问题是静态资源路径，先解决上面的问题即可。

内容的提问来源于stack exchange，提问作者Ole EH Dufour