React+Vite路由配置报错：URL后出现src/main.jsx导致404

核心原因 #

问题本质是资源引入路径使用相对路径导致的。当访问嵌套路由（如/user/panel）或带参数路由时，浏览器会把当前路由路径作为基础路径，去请求src/main.jsx，最终变成http://localhost:5173/user/src/main.jsx——这个路径不存在，所以返回404。

解决方案 #

1. 修正index.html中的资源引入路径 #

打开项目根目录下的index.html，找到引入main.jsx的script标签，把相对路径改成绝对路径（开头加/）：

<!-- 原错误写法 -->
<script type="module" src="src/main.jsx"></script>

<!-- 修改后正确写法 -->
<script type="module" src="/src/main.jsx"></script>

这样不管当前路由是什么，浏览器都会从根路径http://localhost:5173/请求src/main.jsx，不会再出现路径错误。

2. 移除React Router v6中无用的exact属性 #

React Router v6默认采用精确匹配规则，exact属性已被废弃，保留它不会报错但完全冗余。可以统一删除所有<Route>标签上的exact属性，让路由配置更简洁：

<Router>
  <Routes>
    <Route path="/" element={<Welcome />} />   
    <Route path="/Home" element={<Home />} />
    <Route path="/login" element={<Login />} />
    <Route path="/signup" element={<Signup />} />
    <Route path="/products" element={<Products />} />
    <Route element={<RestrictedRoute loggedIn={isLoggedIn} />}>
      <Route path="/8653-admin-2318" element={<Admin />} />
      <Route path="/admin-questions" element={<AdminQuestions />} />
      <Route path="/admin-users" element={<AdminUsers />} />
      <Route path="/admin-ministry" element={<Ministry />} />
      <Route path="/admin-organisation" element={<Organisation />} />
      <Route path="/admin-support" element={<Support />} />
      <Route path="/admin-algorithm" element={<Algorithm />} />
      <Route path="/admin-legislation-add" element={<LegislationAdd />} />
      <Route path="/admin-legislation-table" element={<LegislationTable />} />
      <Route path="/admin-kosul-table" element={<KosulTable />} />
      <Route path="/admin-sebep-table" element={<SebepTable />} />
      <Route path="/admin-sart-table" element={<SartTable />} />
      <Route path="/admin-algorithm-condition-table" element={<AlgorithmConditions />} />
    </Route>
    <Route path="/admin-login" element={<AdminLogin />} />
    <Route path="/forgot-password" element={<ForgotPassword />} />
    <Route path="/payment" element={<PayPage />} />
    <Route path="/user/panel" element={<UserPanel/>} />
    <Route path="/update-password/:tokenId/:userId" element={<UpdatePassword />}/>
  </Routes>
</Router>

3. 验证修复效果 #

修改后重启Vite开发服务器，再次访问/user/panel或带参数路由/update-password/xxx/xxx，页面应该能正常加载，不会再出现404错误。

内容的提问来源于stack exchange，提问作者Omar Dak Elbab