react-router-dom (v6) 生产环境路由失效，开发环境正常

问题原因 #

Azure静态Web Apps作为静态站点托管服务，默认会对每个请求尝试在服务器文件系统中查找对应路径的资源。但React单页应用（SPA）使用BrowserRouter实现的是前端路由，所有路由逻辑都在浏览器端处理，服务器上并不存在/dashboard这类路径的实际文件，因此直接访问这类路径时会返回404错误。而开发环境中React的内置开发服务器已经自动配置了将所有请求回退到index.html，所以不会出现这个问题。

解决方案 #

在React客户端项目的根目录下创建staticwebapp.config.json文件，添加路由回退配置，让所有请求都指向index.html，交由前端路由处理：

{
  "routes": [
    {
      "route": "/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ]
}

将此文件提交到代码仓库后重新部署到Azure Static Web Apps，即可解决直接访问前端路由路径时的404问题。

路由代码优化建议 #

你当前通过两个/dashboard路由实现权限控制的写法虽然可行，但可以简化为单个路由，通过条件渲染让逻辑更清晰：

<BrowserRouter>
  <Routes>
    <Route path='/' element={<SignUp />} />
    <Route path='/signin' element={<Signin />} />
    <Route 
      path='/dashboard' 
      element={user ? <Dashboard /> : <Navigate replace to="/signin" />} 
    />
  </Routes>
</BrowserRouter>

这样既保留了原有的权限控制逻辑，又让路由结构更简洁易维护。

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