React-Router v4 - 链接与重定向与历史记录

Question

对于使用什么而言似乎有些混淆:

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

我一直在使用React/Router一段时间,不同的帖子/答案说明何时使用这些,有时它们与其他人说的不一致.所以我想我需要澄清一下.

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

为您的应用程序提供声明性,可访问的导航.

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

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

看起来我读过的所有帖子几乎每个人都Redirect用来浏览应用程序,没有人建议Link在这篇文章中使用.

现在history可以做同样的事情Link,Redirect除了我有一个历史堆栈跟踪.

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

问题2:既然history可以使用历史堆栈的额外奖励将用户路由到应用程序中的另一个位置,我应该在路由时始终只使用历史对象吗？

问题3:如果我想在应用程序之外进行路由,那么最好的方法是什么？锚标签,Window.location.href,Redirect,Link,以上都没有？

Answer 1

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

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

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

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

Link NavLink并且Redirect所有人都使用路由器的历史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'以防止漏洞