React-Router - Link与Redirect与History的区别

Question

React-Router - Link与Redirect与History的区别

reactjsreact-routerreact-router-v4react-router-dom

98

对于这三个方式，存在一些混淆：

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

我已使用React/Router一段时间，不同的文章和答案说了不同的用法，有时他们与其他人说的不一样。所以我认为需要澄清一下。

根据`Link`和文档：

提供声明式、可访问的导航。

根据`Redirect`和文档：

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

似乎我读过的所有帖子中，几乎所有人都使用Redirect来导航到他们的应用程序，没有人推荐像这个文章中那样使用Link。

现在，history可以像Link和Redirect一样做同样的事情，只不过我有一个历史记录堆栈。

问题1：何时使用Link和Redirect，每种方法的使用场景是什么？

问题2：既然history可以通过添加历史记录堆栈将用户路由到应用程序中的另一个位置，那么在进行路由时，我是否应该始终只使用history对象？

问题3：如果我想路由到应用程序之外，最好的方法是什么？锚点标签、Window.location.href、Redirect、Link还是以上都不是？

- Phil

3

当点击 Link 时，它会使你在应用程序中导航。当渲染 Redirect 时，它将自动将一个条目推送到 history 栈中。
例如，单击 Link 也会将一个条目推送到 history 栈中，因此如果您的目的可以使用 Link，通常比自己操纵 history 更容易。
普通的 <a> 标签非常好用。

- Tholle

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mike Abeln · Accepted Answer

首先，我强烈建议阅读这个网站：
https://v5.reactrouter.com/web/api/Route

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

但是回答您的问题：
Answer 1： 在几乎所有用例中，您都需要使用Link或NavLink。 Redirect在特定情况下非常有用，例如当用户尝试访问未定义的路由时会渲染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' 以防止 vulnerabilities。

React-Router - Link与Redirect与History的区别

根据Link和文档：

根据Redirect和文档：

根据`Link`和文档：

根据`Redirect`和文档：