React-Router V6 显示上一条路由

Question

我正在设置 404 页面。它将位于 /404，我将用于<Navigate path='/404' />任何未知的路线。这一切都工作正常，但我还想显示 URL 详细信息，甚至记录坏链接。为此，我需要访问之前的路线详细信息。

有一篇类似的文章，但它讨论的是导航历史记录，而不是显示历史信息。

如何在react-router-dom v6中返回到之前的路由

我尝试了以下各种组合，尝试从 useLocation 获取详细信息并作为状态传递，但它会引发错误：Error: useLocation() may be used only in the context of a <Router> component.

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Homepage />} />
    <Route path="/404" element={<NoPageFound />} />
    <Route path="*" element={<Navigate to='/404' state={{ prevRoute: useLocation() }} />} />
  </Routes>
<BrowserRouter>

是否有其他方法可以从内部访问之前的路线详细信息<NoPageFound />以用于显示/记录目的？

Answer 1

useLocation直接在 的Navigate组件中使用钩子的问题Route是，它在渲染 的组件的外部范围内运行BrowserRouter。

您可以创建一个 React 组件来获取当前位置并将其传递给渲染的Navigate组件。

const UnkownRouteHandler = ({ to }) => {
  const prevRoute = useLocation();
  return <Navigate to={to} state={{ prevRoute }} replace />
};

...

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Homepage />} />
    <Route path="/404" element={<NoPageFound />} />
    <Route path="*" element={<UnkownRouteHandler to="/404" />} />
  </Routes>
<BrowserRouter>

通过这种方式，它类似于在发生身份验证重定向之前获取受保护路由的当前访问的路由，将该位置作为“引荐来源网址”传递，因此在身份验证完成后，您可以将用户重定向回他们最初尝试的路由使用权。在您的情况下，您只是想捕获未处理的路由是什么，并转发以进行处理/记录/等。