reactjs - 发送 404 状态并重定向到 react-router 中的 404 组件

Question

我有一个带有 NotFound 组件的 react-router 3.0.0 设置，我将其显示为后备：

<Route component={NotFound} path="*"/>

然而，这会返回一个重定向，并且谷歌爬虫抱怨软 404。我可以同时重定向到我的 NotFound 组件并发送 404，类似于 Github 所做的吗？我从这里尝试了以下建议：如何让反应路由器响应 404 状态码？

<Route component={NotFound} path="*" status={404}/>

但这只是给了我一个 404 而不显示组件。

以上如何实现？

Answer 1

反应路由器 v6

现场演示：使用 React Router 重定向默认路由或 404 路由

示例代码：

<Router>
  <Routes>
    <Route path="users" element={<Users />} />
    <Route path="posts" element={<Posts />} />
  </Routes>
</Router>

要重定向并导航到我们选择的路线之一，我们可以使用 React Router 中的组件。现在我们可以在路由配置下面声明空路由的情况，如下所示：

<Router>
  <Routes>
    <Route path="users" element={<Users />} />
    <Route path="posts" element={<Posts />} />
    <Route path="" element={<Navigate to="/users" />} />
  </Routes>
</Router>