React.js Router URL参数路由引发资源加载错误问题

这个问题我之前也碰到过，核心原因就是相对路径在带层级的URL下解析逻辑和你预期的不一样。当你在http://localhost:8080/edit/99页面里用相对路径引用bundle.js时，浏览器会把它解析成/edit/bundle.js（因为当前URL的路径是/edit/99），而服务器找不到这个资源，就返回了HTML页面（通常是404页面），所以脚本的MIME类型变成了text/html，自然无法执行。

下面是几个针对性的解决办法：

1. 改用绝对路径引用脚本 #

直接在你的HTML里把bundle.js的引用改成绝对路径，注意开头的斜杠：

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

这样不管当前页面的URL是什么层级，浏览器都会从根域名开始请求资源，也就是http://localhost:8080/public/bundle.js，完全避免路径解析错误。

2. 配置构建工具的publicPath（如果用Webpack等工具） #

如果你是用Webpack打包项目，在webpack.config.js里设置output.publicPath为资源的根路径前缀，打包后的脚本引用会自动带上这个前缀：

const path = require('path');

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

这样Webpack生成的HTML里，脚本的src会自动变成/public/bundle.js，不用手动修改HTML。

3. 服务器端配置SPA路由 fallback（针对单页应用） #

因为你是客户端渲染的SPA，所有路由都应该指向index.html，这样即使访问/edit/99，服务器也返回正确的页面，再配合上面的绝对路径引用，就不会出问题。比如用Express的话：

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

// 托管静态资源
app.use(express.static('public'));

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

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

这个配置确保不管用户访问哪个路由，服务器都返回你的SPA入口页面，避免出现404返回HTML导致的MIME类型错误。

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