React-Router V6 显示上一个路由

Posted 2023-02-16

【中文标题】React-Router V6 显示上一个路由

【英文标题】：React-Router V6 Display Previous Route

【发布时间】：2021-12-29 21:10:42

【问题描述】：

我正在设置一个 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 /> 中访问之前的路线详细信息以进行显示/记录？

【参考方案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>

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

【讨论】：

这很有趣。我希望 useLocation 默认只公开以前的路线。

replace 在导航中的作用是什么？

@AdamYoungers replace 是一个布尔值，表示导航应该是REPLACE 而不是PUSH，换句话说，它是重定向而不是常规导航，替换当前历史条目，而不是在历史堆栈上推送新条目。