首次配置Webpack+React-Router-Dom时带参数路由访问404问题求助

我刚碰到过一模一样的问题！你这个404的核心原因是HTML里的脚本用了相对路径，导致嵌套路由下浏览器找错了资源位置：

当你访问/people时，浏览器的当前路径是根目录的子路径，请求./index.js会解析成/index.js（对应Webpack输出的bundle），所以没问题；但访问/people/1时，浏览器会把./index.js解析成/people/index.js，而你的bundle根本不在这个路径下，自然就404了。

解决方案步骤： #

• 删除手动添加的script标签
  打开你的src/index.html，把这行删掉：

  <script src='./index.js'></script>
  

  你已经用了HtmlWebpackPlugin，它会自动根据你的Webpack配置，在生成的dist/index.html里注入正确的bundle脚本，路径会是绝对路径/bundle.js，这样不管路由是几级，都会从根路径加载资源，不会再出错。

• 确认Webpack配置的关键项（你已经配置了，但再核对下）

  • output.publicPath: '/'：这个确保所有静态资源的基础路径是根目录，是解决嵌套路由资源加载的核心配置。
  • devServer.historyApiFallback: true：这个配置让Dev Server在收到任何路由请求时都返回index.html，避免刷新嵌套路由时出现404，你已经设置好了，没问题。

额外验证点： #

运行npm run build后，打开dist/index.html，你会看到自动生成的script标签是这样的：

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

绝对路径的资源请求就不会再受当前路由路径影响了。

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