React-Router V6 显示上一个路由

Posted

技术标签:

【中文标题】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>

我是否可以通过其他方式从 &lt;NoPageFound /&gt; 中访问之前的路线详细信息以进行显示/记录?

【问题讨论】:

【参考方案1】:

RouteNavigate 组件中直接使用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,换句话说,它是重定向而不是常规导航,替换当前历史条目,而不是在历史堆栈上推送新条目。

以上是关于React-Router V6 显示上一个路由的主要内容,如果未能解决你的问题,请参考以下文章

react-router路由之routerRender方法(v5 v6)

使用 CSSTransitionGroup 和 React-Router v6 动画路由过渡

react-router v6:获取当前路由的路径模式

react-router v6新特性

Vue/React实现路由鉴权/导航守卫/路由拦截(react-router v6)

2021 react-router v6 快速入门