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

IT技术 reactjs react-router react-router-component react-routing
2021-05-23 07:34:34

我有一个带有 NotFound 组件的 react-router 3.0.0 设置,我显示为后备:

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

然而,这会返回一个重定向,谷歌爬虫抱怨软 404。我可以重定向到我的 NotFound 组件并发送 404,类似于 Github 所做的吗?我从这里尝试了以下建议:How to let react router response with 404 status code?

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

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

怎样才能做到以上几点?

1个回答

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