似乎与其他方法相比有些混乱:
<Link to='/some/path'>
<Redirect to='/some/path'/>
history.push('/some/path')
我已经使用React / Router了一段时间了,不同的帖子/答案对何时使用它们表达了不同的看法,有时它们与其他人的看法不一致。因此,我想对此进行一些澄清。
Link
router/blob/master/packages/react-router-dom/docs/api/Link.md)内容:
提供围绕应用程序的声明式,可访问的导航。
Redirect
router/blob/master/packages/react-router/docs/api/Redirect.md)内容:
将导航到新位置。新位置将覆盖历史记录堆栈中的当前位置,就像服务器端重定向(HTTP 3xx)一样。
好像所有我看过几乎每个人都使用的职位Redirect,以有应用导航四周,没有一个人建议使用Link像在这个岗位。
现在history可以执行与和相同的操作Link,Redirect除了我有一个历史记录堆栈跟踪。
history
问题1: 我什么时候要使用Linkvs Redirect,相对于另一个,用例是什么?
问题2: 由于history可以使用历史记录堆栈的附加功能将用户路由到应用内其他位置,因此在路由时是否应该始终只使用历史记录对象?
问题3: 如果我想路由到应用程序 之外 ,什么是最好的方法?锚标记,Window.location.href,重定向,链接,以上都不是?
首先,我真的建议您阅读以下站点:https : //reacttraining.com/react- router/web/api/BrowserRouter
React Router会BrowserRouter为您维护历史记录堆栈,这意味着您几乎不需要手动对其进行修改。
BrowserRouter
但是要回答您的问题: 答案1: 您将要使用Link或NavLink几乎所有用例。Redirect但是在特定情况下会派上用场,例如,当用户尝试访问未定义的路由时呈现404页面。该Redirect会从404路线将用户重定向到您选择的新路径,然后替换历史堆栈与重定向路径中的最后一项。
NavLink
这意味着用户将无法点击其浏览器的后退按钮,并返回到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'以防止出现漏洞
target='_blank'
rel='noopener noreferrer'