似乎对使用什么有一些混淆:
<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
vsRedirect
,另一个用例是什么?
问题 2:由于history
可以将用户路由到应用程序内的另一个位置,并具有历史记录堆栈的额外奖励,因此我是否应该在路由时始终只使用历史记录对象?
问题 3:如果我想在应用程序外部路由,最好的方法是什么?锚标记,窗口.位置.href,重定向,链接,以上都不是?
首先,我真的建议通读这个网站:
https://v5.reactrouter.com/web/api/Route
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'
以防止漏洞