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

【问题标题】：Send both 404 status and redirect to 404 component in react-router发送 404 状态并重定向到 react-router 中的 404 组件
【发布时间】：2017-07-03 09:56:36
【问题描述】：

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

<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 而不显示组件。

以上如何实现？

【问题讨论】：

如果您想返回 HTTP 404 状态，您需要从服务器执行此操作。您可以为此使用match。如果匹配失败，您可以在响应中返回 404 状态。 knowbody.github.io/react-router-docs/api/match.html
查看您链接的同一问题中的其他回复。 stackoverflow.com/a/36075450/2030321 Taion 实际上是 react-router（以及其他一些库）背后的开发人员之一。 @cheersjosh 说的也差不多。它也必须从服务器发生。
好的，谢谢。不过，我没有进行服务器端渲染，并希望有一个像我尝试过的那样的快速解决方案。

标签： reactjs react-router react-router-component react-routing

【解决方案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>

【讨论】：

谢谢@Nick，好久不见了 :)