React动态路由失效求助：访问带参路由出现MIME类型错误

嘿，我刚帮好几个React新手踩过这个坑！你遇到的问题其实和react-router本身关系不大，核心是资源路径的解析错误，听我给你拆解下：

问题根源 #

当你访问http://localhost:8080/edit/22时，浏览器会把当前的路由层级当成/edit/，所以加载bundle.js的时候，它会自动请求/edit/bundle.js——但你的打包文件明明放在根目录下，服务器找不到这个文件，就返回了HTML页面，这就导致浏览器报MIME类型不匹配的错误（因为它期待的是JS脚本，结果拿到了HTML）。

快速解决方案 #

这里有几种不同场景下的解决办法，你可以根据自己的项目情况选：

1. 直接修改HTML中的脚本路径 #

找到你项目入口的HTML文件（比如index.html），把引入bundle.js的相对路径改成绝对路径：

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

<!-- 修改后的写法（绝对路径，强制从根目录加载） -->
<script src="/bundle.js"></script>

2. 如果你用Create React App #

在项目根目录的package.json里添加homepage字段，设置为根路径：

{
  "name": "your-app",
  "homepage": "/", // 加这一行
  // ...其他配置
}

这样打包后的所有资源都会以根路径为基准加载，不会再出现路径错误。

3. 手动配置Webpack的情况 #

如果是自己搭的Webpack项目，修改webpack.config.js里的output.publicPath为根路径：

module.exports = {
  // ...其他配置
  output: {
    filename: 'bundle.js',
    publicPath: '/' // 关键配置，指定资源的基准路径
  }
};

额外提醒 #

如果以后要部署到服务器的子目录（比如https://your-domain.com/app/edit/22），只需要把对应的路径改成子目录即可：比如HTML里的脚本路径改成/app/bundle.js，或者Webpack的publicPath设为"/app/"，Create React App的homepage设为"/app/"。

试试上面的方法，应该就能解决你的问题啦！

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