react build 中未定义路由：react-router-dom v6

Question

<Router>
 <Routes>
  <Route path="/login" element={<Login />} />
  <Route path="/" element={<Dashboard />} />
  <Route path="*" element={<h2>Page not found</h2>} />
 </Routes>
</Router>

这就是我在 v6 中定义路由的方式，这在开发中完美运行，但在构建版本中，仅加载“/”的索引路由，其他路由不起作用，说：找不到请求的路径。

截图是构建版本

Answer 1

React Router 是一个客户端路由解决方案，顾名思义，所有的“路由”都是在用户的浏览器上完成的。

当用户请求访问/login时，这就是您在问题中所做的，默认情况下浏览器期望访问/login.html 。 它请求服务器向他发送这样的文件，但由于所有路由都是在客户端完成的，服务器不知道它也没有/login.html在手。

你应该做的是在你的服务器端添加一个通配符表达式，将所有未映射的请求发送回客户端，以便 React Router 可以获取路径更改并完成它的工作。