React应用嵌套路由刷新时错误在路由路径下查找bundle.js

我之前也踩过这个一模一样的坑！你遇到的问题核心确实是资源路径解析错误：当在嵌套路由register/email-confirmation页面刷新时，浏览器会把当前的嵌套路径当作相对路径的基准，所以它会尝试从http://localhost:3002/register/bundle.js加载你的打包文件，而不是项目根目录的http://localhost:3002/bundle.js——这就导致了控制台里的404错误，以及后续的MIME类型报错（因为服务器找不到文件时返回了HTML页面，浏览器自然无法把它当作脚本执行）。

下面是几个快速解决的方案，按优先级排序：

1. 在HTML中添加<base>标签 #

这是最简单直接的方法，在你的public/index.html的<head>标签里添加一行：

<base href="/" />

这个标签会告诉浏览器，所有相对路径的资源请求都以根目录/为基准，不管当前页面处于哪个路由路径下。

2. 配置Webpack的publicPath #

如果你用Webpack打包项目，确保在webpack.config.js的output配置里设置publicPath: '/'：

module.exports = {
  // ...其他配置
  output: {
    filename: 'bundle.js',
    publicPath: '/' // 关键配置
  }
};

这样Webpack在生成资源引用时，会自动把路径处理成绝对路径（比如/bundle.js而不是bundle.js），从根源上避免相对路径的问题。

3. 统一使用绝对路径引用静态资源 #

检查你项目中所有静态资源的引用方式，比如图片、字体等，不要用相对路径./assets/logo.png，改用绝对路径/assets/logo.png。这样不管当前路由是什么，浏览器都会从根目录加载这些资源。

4. 配置服务器端的路由 fallback #

因为React是单页应用（SPA），当你刷新嵌套路由时，服务器可能会找不到对应的文件而返回404。你需要配置服务器，让所有路由请求都返回主页面index.html，然后由React Router来处理路由逻辑。

比如用Express的话，可以这样写：

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

// 静态文件服务
app.use(express.static(path.join(__dirname, 'build')));

// 所有路由请求都返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(3002);

如果用Nginx，需要在配置里添加：

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

做完这些配置后，再刷新嵌套路由页面，应该就能正常加载资源了。

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