React Router v6用Navigate刷新产品页报bundle.js404怎么办

你碰到的GET http://localhost:3000/product/bundle.js net::ERR_ABORTED 404报错和react-router-dom v6的Navigate组件逻辑无关，是静态资源引用路径配置错误导致的：

• 入口HTML中引用打包后的bundle.js时使用了相对路径（例如<script src="bundle.js"></script>）
• 当你在/product/xxx这类二级路由下刷新页面时，浏览器会以当前路由路径/product/为基准查找静态资源，因此会发起对/product/bundle.js的请求，该路径下不存在对应资源，自然返回404
• v5版本下未触发该问题，一般是当时开发服务的history fallback配置刚好覆盖了这类场景，升级依赖时顺带改动了构建配置或入口文件路径写法才暴露问题。

1. 修正静态资源引用路径 #

找到项目public目录下的index.html入口文件，将所有js、css等静态资源的引用改为从站点根目录加载的绝对路径，在资源路径前加/即可：

<!-- 错误：相对路径写法 -->
<script src="bundle.js"></script>
<link rel="stylesheet" href="App.css">

<!-- 正确：根路径绝对引用 -->
<script src="/bundle.js"></script>
<link rel="stylesheet" href="/App.css">

如果使用webpack/vite等构建工具，同步检查构建配置：

• webpack: 将output.publicPath配置为/
• vite: 将base配置项设置为/
  保证打包后产出的资源引用路径全部从站点根目录出发，不会随当前路由变化。

2. 配置路由history模式fallback #

前端history模式路由需要服务端支持，保证任意路由路径的请求都返回入口index.html，交给前端路由处理：

• 本地开发：webpack-dev-server需要开启historyApiFallback: true配置，vite默认已支持该规则无需额外修改
• 生产部署：给Nginx、Apache等web服务配置重写规则，将所有请求重定向到index.html，避免二级路由刷新返回404。

3. 优化v6路由重定向逻辑（可选，对齐v5 Redirect行为） #

你目前直接在Route的element属性中写三元判断虽然可以运行，但更符合v6最佳实践的写法是抽离独立的路由守卫组件，同时给Navigate加上replace属性，替换历史栈记录，和旧版Redirect的跳转行为完全一致：

// 路由守卫组件 RequireCurrentItem.jsx
import { Navigate } from 'react-router-dom';
import { connect } from 'react-redux';

const RequireCurrentItem = ({ currentItem, children }) => {
  return currentItem ? children : <Navigate to="/" replace />;
};

const mapStateToProps = state => ({
  currentItem: state.shop.currentItem
});

export default connect(mapStateToProps)(RequireCurrentItem);

在路由配置中使用该守卫组件包裹需要校验的商品详情页：

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomeScreen/>}/>
        <Route path="/cart" element={<Cart/>}/>
        <Route 
          path="/product/:id" 
          element={
            <RequireCurrentItem>
              <SingleItem/>
            </RequireCurrentItem>
          } 
        />
        <Route path="*" element={<HomeScreen/>} />
      </Routes>
    </Router>
  )
};

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