反应路由器 - 链接 vs 重定向 vs 历史



似乎对使用什么有一些混淆:

  • <Link to='/some/path'>
  • <Redirect to='/some/path'/>
  • history.push('/some/path')

我已经使用 React/Router 一段时间了,不同的帖子/答案对何时使用这些说不同的话,有时它们与其他人所说的不一致。所以我认为我需要对此进行一些澄清。

根据我对Link和本文档的理解:

围绕应用程序提供声明性、可访问的导航。

根据我对Redirect和本文档的理解,它:

将导航到新位置。新位置将覆盖历史记录堆栈中的当前位置,就像服务器端重定向 (HTTP 3xx( 一样。

似乎我读过的所有帖子几乎每个人都使用Redirect来浏览那里的应用程序,没有人建议像这篇文章中那样使用Link

现在history可以做与LinkRedirect相同的事情,除了我有一个历史堆栈跟踪。

问题 1:我什么时候想使用LinkvsRedirect,另一个用例是什么?

问题 2:由于history可以将用户路由到应用程序内的另一个位置,并具有历史记录堆栈的额外奖励,因此我是否应该在路由时始终只使用历史记录对象?

问题 3:如果我想在应用程序外部路由,最好的方法是什么?锚标记,窗口.位置.href,重定向,链接,以上都不是?

首先,我真的建议通读这个网站:
https://v5.reactrouter.com/web/api/Route

React Router 的BrowserRouter为您维护历史记录堆栈,这意味着您很少需要手动修改它。

但要回答您的问题:
答案 1:您需要在几乎所有用例中使用LinkNavLinkRedirect在特定情况下派上用场,例如当用户尝试访问未定义的路由时呈现 404 页面。Redirect会将用户从 404 路由重定向到您选择的新路由,然后将历史记录堆栈中的最后一个条目替换为重定向的路由。

这意味着用户将无法点击浏览器的后退按钮,并返回 404 路由。

LinkNavLinkRedirect都使用路由器的历史API,使用这些组件而不是手动使用历史意味着您将来可以安全地对历史API进行任何更改。使用这些组件可以使代码经得起未来的考验。

答案 2:BrowserRouter为您维护历史记录堆栈,通常我的观点是您希望尽可能避免手动更新它。

答案 3:以下是外部反应链接的几个示例:

<Route path='/external' component={() => window.location = 'https://external.com/path'}/>
<小时 />
<a href='https://external.com/path' target='_blank' rel='noopener noreferrer'>Regular Anchor tags work great</a>

target='_blank'将在新选项卡中打开链接,但请确保包含rel='noopener noreferrer'以防止漏洞

最新更新