React Redux中带动态ID的路由无法加载，如何修复？

嘿，这个问题我之前踩过坑！一眼就能看出根源：资源加载路径解析错误。

当你访问不带参数的路由（比如/application）时，浏览器会默认从根目录/加载bundle.js；但访问/profile/:id这类带动态参数的路由时，浏览器会误以为/profile是一个真实存在的目录，于是跑去/profile/bundle.js找脚本文件——这个路径根本不存在，自然就抛出404，后续的MIME类型报错也是因为服务器返回了404页面（HTML格式），而非可执行的JS文件。

下面给你几个快速修复的方案：

方法1：修改HTML中bundle.js的引入路径为绝对路径 #

找到项目入口HTML文件（通常是public/index.html），把相对路径的脚本引入改成绝对路径：

<!-- 原来的相对路径写法 -->
<script src="bundle.js"></script>

<!-- 修改为绝对路径（加根路径斜杠） -->
<script src="/bundle.js"></script>

这个方法最简单直接，本地开发和部署场景都能生效。

方法2：配置Webpack的publicPath为根路径 #

如果你的项目是手动配置Webpack的，打开webpack.config.js，在output选项里添加publicPath: '/'：

module.exports = {
  // ...其他配置项
  output: {
    filename: 'bundle.js',
    publicPath: '/' // 关键配置，强制资源从根目录加载
  }
};

配置后Webpack打包时，会自动把所有资源的引用路径设为绝对路径，彻底避免路径解析错误。

方法3：生产环境服务器的SPA路由适配（可选） #

如果后续要部署到生产环境（比如用Nginx），还需要配置服务器让所有路由请求都指向index.html，否则刷新/profile/:id页面仍会404。以Nginx为例，添加如下配置：

location / {
  try_files $uri $uri/ /index.html;
}

不过你现在是本地开发，前两个方法就足够解决问题了。

先试试方法1，应该马上就能看到Profile页面正常加载啦！

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