Reactjs 反应路由器-链接与重定向与历史记录

Reactjs 反应路由器-链接与重定向与历史记录,reactjs,react-router,react-router-v4,react-router-dom,Reactjs,React Router,React Router V4,React Router Dom,似乎有一些关于使用什么的混淆: history.push('/some/path') 我已经使用React/Router有一段时间了,不同的帖子/答案对何时使用这些内容有不同的看法,有时它们与其他人所说的不一致。所以我想我需要澄清一下 从我对链接的理解来看,它: 在应用程序周围提供声明式、可访问的导航 根据我对重定向的理解,它: 将导航到新位置。新位置将覆盖历史堆栈中的当前位置,就像服务器端重定向(HTTP 3xx)一样 似乎我读过的所有帖子几乎每个人都使用Redirect在应用程序中导

似乎有一些关于使用什么的混淆:

  • history.push('/some/path')
我已经使用React/Router有一段时间了,不同的帖子/答案对何时使用这些内容有不同的看法,有时它们与其他人所说的不一致。所以我想我需要澄清一下

从我对
链接的理解来看
,它: 在应用程序周围提供声明式、可访问的导航

根据我对
重定向的理解,它:
将导航到新位置。新位置将覆盖历史堆栈中的当前位置,就像服务器端重定向(HTTP 3xx)一样

似乎我读过的所有帖子几乎每个人都使用
Redirect
在应用程序中导航,没有人推荐像这样使用
Link

现在
history
可以做与
Link
Redirect
相同的事情,只是我有一个历史堆栈跟踪

问题1:我什么时候想使用
链接
重定向
相比,使用情况如何

问题2:既然
历史记录
可以使用历史记录堆栈的额外功能将用户路由到应用程序中的另一个位置,我是否应该在路由时始终使用历史记录对象


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

首先,我真的建议你浏览这个网站:

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

但要回答您的问题:
答案1:您将希望在几乎所有用例中使用
Link
NavLink
<代码>重定向
在特定情况下非常方便,例如,当用户试图访问未定义的路由时,404页面被呈现。
重定向
将用户从404路由重定向到您选择的新路由,然后用重定向路由替换历史堆栈中的最后一个条目。

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

Link
NavLink
Redirect
都在引擎盖下使用路由器的历史api,使用这些组件而不是手动使用历史意味着您将来可以安全地更改历史api。使用这些组件可以对代码进行未来验证

答案2:
BrowserRouter
为您维护历史堆栈,通常我的意见是您不希望在可以的地方手动更新它

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

<Route path='/external' component={() => window.location = 'https://external.com/path'}/>
window.location=https://external.com/path'}/>



target=''u blank'
将在新选项卡中打开链接,但请确保包含
rel='noopener noreferrer'
以防止出现1<代码>链接使您在单击应用程序时可以在其周围导航。当呈现
重定向
时,它将自动推送
历史
堆栈上的一个条目。2.例如,单击一个
链接
也会将一个条目推送到
历史
堆栈中,因此如果您可以出于自己的目的使用
链接
,通常比自己操作
历史
更容易。3.常规的
标记非常有效。请注意
target=''blank'
:建议添加到您的
tag@BlunderingPhilosopher非常感谢。这对我来说是新的-我已经更新了答案。
<a href='https://external.com/path' target='_blank' rel='noopener noreferrer'>Regular Anchor tags work great</a>