React Router动态路由报错：MIME类型'text/html'不可执行

这个问题我之前也碰到过，其实根源是资源路径解析的问题，让我给你拆解一下原因和解决方案：

为什么会出现这个错误？ #

当你使用不带参数的路由/edit时，浏览器当前的URL是http://localhost:8080/edit，此时如果你的HTML中用相对路径引入bundle.js（比如<script src="bundle.js"></script>），浏览器会解析为http://localhost:8080/bundle.js，这是正确的。

但当你使用带动态参数的路由/edit/:id时，URL变成了http://localhost:8080/edit/123（假设id是123），浏览器会把相对路径的bundle.js解析为http://localhost:8080/edit/bundle.js。而你的服务器并没有配置/edit/bundle.js这个路由，于是会返回你的index.html页面（单页应用的服务器通常会把未匹配的路由返回首页），这时候bundle.js的实际内容是HTML，MIME类型变成了text/html，浏览器自然拒绝执行它。

解决方案 #

1. 修改HTML中bundle.js的引用为绝对路径 #

把你的index.html里的脚本引用从相对路径改成绝对路径，确保不管当前路由是什么，都从根目录加载资源：

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

<!-- 修改为绝对路径 -->
<script src="/bundle.js"></script>

2. 配置Webpack的publicPath（如果使用Webpack） #

如果你用Webpack打包，需要在配置文件中设置publicPath: '/'，这样Webpack生成的所有资源引用都会使用根路径：

// webpack.config.js
const path = require('path');

module.exports = {
  // ...其他配置项
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/' // 关键配置
  }
};

3. 确保服务器正确处理单页应用路由（可选但重要） #

为了避免刷新动态路由页面时出现404，同时保证资源请求正确，需要让服务器把所有非静态资源的请求都返回index.html。比如用Express的话，配置如下：

const express = require('express');
const path = require('path');
const app = express();

// 静态资源目录（比如dist文件夹）
app.use(express.static(path.join(__dirname, 'dist')));

// 所有非静态资源请求返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

app.listen(8080, () => {
  console.log('Server running on port 8080');
});

按照这几步操作后，动态路由下的资源加载问题应该就能解决了。

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