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

Question

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

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

然而，这会返回一个重定向，并且 Google 抓取工具会提示软 404。我可以重定向到 NotFound 组件并发送 404，类似于 Github 的做法吗？我已经从这里尝试了以下建议:How to let react router respond with 404 status code?

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

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

如何实现上述目标？

Answer 1

React 路由器 v6

现场演示:Redirect Default or 404 Routes with React Router

示例代码:

<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>