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

时间:2018-06-30 16:45:11

标签: reactjs react-router react-router-v4 react-router-dom

与其他用法相比似乎有些混乱:

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

我已经使用React / Router已有一段时间了,不同的帖子/答案对何时使用它们表达了不同的看法,有时它们与其他人的看法不一致。因此,我认为需要对此进行澄清。

据我对Link以及对此documentation的了解:

  

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

据我对Redirect以及对此documentation的了解:

  

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

似乎我读过的所有帖子几乎每个人都使用Redirect来浏览该应用程序,而且从未有人建议像本post一样使用Link

现在,history可以执行与LinkRedirect相同的操作,除了我具有历史记录堆栈跟踪。

问题1:我什么时候想使用LinkRedirect,什么是其他情况?

问题2:由于history可以使用历史记录堆栈的附加功能将用户路由到应用内另一个位置,因此我在路由时是否应该始终只使用历史记录对象? / p>

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

1 个答案:

答案 0 :(得分:10)

首先,我真的建议您阅读以下站点:
https://reacttraining.com/react-router/web/api/BrowserRouter

反应路由器的BrowserRouter为您维护历史记录堆栈,这意味着您几乎不需要手动对其进行修改。

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

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

Link NavLinkRedirect都在幕后使用路由器的历史记录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'以防止出现vulnerabilities