React-Router-Dom V6仅生产环境跳转至/not-found问题咨询

问题场景 #

开发模式下路由运行正常，但部署项目构建产物到服务器后，所有路径均无法被正确识别，统一跳转至/not-found页面。相关路由代码如下：

<Routes>
  <Route
    path="/"
    element={
      <AuthGuard component={<Home />} />
    }
  />
  <Route
    path="/groups"
    element={
      <AuthGuard
        backgroundColor='darkRed'
        component={<Groups />}
      />
    }
  >
    <Route
      path=":groupId"
      element={<Groups />}
    />
  </Route>
  <Route
    path="/join-group/:groupCode"
    element={<JoinGroup />}
  />
  <Route
    path="/matches"
    element={
      <AuthGuard
        component={<Matches />}
      />
    }
  />
  <Route
    path="/see-more"
    element={
      <AuthGuard component={<SeeMore/>} />
    }
  />
  <Route
    path="/remote-login"
    element={<RemoteLogin />}
  />
  <Route
    path="/not-found"
    element={<NotFound />}
  />
  <Route
    path="*"
    element={<Navigate to="/not-found"/>}
  />
</Routes>

问题原因 #

这是单页应用（SPA）的典型服务器配置问题：
当直接访问/groups、/matches这类子路径时，服务器会尝试寻找对应的物理文件，但SPA只有一个入口文件（通常是index.html），找不到文件就会返回404状态码，触发前端路由的兜底规则path="*"，最终跳转到/not-found。

解决办法 #

需要修改服务器配置，让所有请求都指向SPA的入口文件index.html，由前端路由处理路径匹配：

1. Nginx服务器 #

在Nginx的server配置块中添加以下规则：

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

2. Apache服务器 #

在项目根目录创建或修改.htaccess文件，添加Rewrite规则：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

3. 静态托管服务（Netlify/Vercel） #

• Netlify：在项目根目录创建_redirects文件，内容如下：

  /* /index.html 200
  

• Vercel：在项目根目录创建vercel.json文件，内容如下：

  {
    "rewrites": [
      { "source": "/(.*)", "destination": "/index.html" }
    ]
  }
  

额外检查 #

确认前端路由使用的是BrowserRouter（React Router），而非HashRouter——HashRouter会在路径中添加#，虽能避免服务器配置问题，但不符合常规路由格式。

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