配置Vite base后React路由无法匹配的问题排查

当你在Vite中设置base: '/tools/evidence'后，应用的基础路径变为/tools/evidence，但React Router的BrowserRouter未同步配置该基础路径，导致路由解析逻辑不匹配：

• Vite将http://localhost:5173/tools/evidence视为应用根路径
• 但BrowserRouter默认从URL根路径（/）开始匹配路由，此时页面的location.pathname是/tools/evidence，而你的index路由匹配的是/，自然找不到对应路由，最终触发NotFound组件

解决步骤 #

修改BrowserRouter组件，添加basename属性，值与Vite配置中的base保持一致：

// ... 其他代码不变
<BrowserRouter basename="/tools/evidence">
  <Routes>
    <Route index element={<div>Home</div>} />
    <Route
      path="/topics/*"
      element={
        <>
          <EditorRoutes />
          <PrintRoutes />
        </>
      }
    />
    <Route path="/feedback" element={<FeedbackPage />} />
    <Route path="/accessibility" element={<Accessibility />} />
    <Route path="/cookies" element={<Cookies />} />
    <Route path="/algorithms" element={<Algorithms />} />
    <Route path="/privacy" element={<Privacy />} />
    <Route path="*" element={<NotFound />} />
  </Routes>
</BrowserRouter>
// ... 其他代码不变

原理说明 #

设置basename后，React Router会自动将所有路由路径拼接在该基础路径之后：

• 原index路由（匹配/）会对应实际URL的/tools/evidence
• 原/feedback路由会对应实际URL的/tools/evidence/feedback

此时Vite的基础路径配置与React Router的路由解析逻辑完全匹配，访问http://localhost:5173/tools/evidence即可正常渲染Home组件。

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