React-Router - 链接 vs 重定向 vs 历史

IT技术 reactjs react-router react-router-v4 react-router-dom
2021-04-29 23:40:09

似乎有一些混淆使用什么而不是另一个:

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

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

根据我的了解Link和本文档

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

根据我的了解Redirect和本文档

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

似乎我读过的所有帖子几乎每个人都用来Redirect在该应用程序中导航,并且没有人推荐Link在这篇文章中使用like

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

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

问题 2:既然history可以通过历史堆栈的额外奖励将用户路由到应用程序内的另一个位置,那么我应该在路由时总是使用历史对象吗?

问题 3:如果我想在应用程序之外进行路由,最好的方法是什么?锚标签、Window.location.href、重定向、链接,以上都不是?

1个回答

首先,我真的建议通读这个网站:https :
//reacttraining.com/react-router/web/api/BrowserRouter

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

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

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

Link NavLink并且Redirect都在引擎盖下使用路由器的历史记录 api,使用这些组件而不是手动历史记录意味着您将来对历史记录 api 的任何更改都是安全的。使用这些组件可以使您的代码面向未来。

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

答案 3:以下是一些外部 React 链接的示例:

<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'以防止漏洞