React-Router V6 显示上一个路由

Question

我正在设置一个 404 页面。它将位于 /404，我将使用<Navigate path='/404' /> 来处理任何未知的路线。这一切都很好，但我还想显示 URL 详细信息，甚至更想记录错误链接。为此，我需要访问之前的路线详情。

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

How to go back to previous route in 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

在Route 的Navigate 组件中直接使用useLocation 挂钩的问题在于它在呈现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>

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