问题描述
对于使用什么似乎有些混淆:
history.push('/some/path')
我已经使用 React/Router 一段时间了,不同的帖子/答案对何时使用这些有不同的说法,有时它们与其他人所说的不一致.所以我想我需要澄清一下.
据我了解 Link
和这个 文档它:
在您的应用程序周围提供声明式、可访问的导航.
据我了解 Redirect
和这个 文档 它:
将导航到新位置.新位置将覆盖历史堆栈中的当前位置,就像服务器端重定向 (HTTP 3xx) 所做的那样.
似乎我读过的所有帖子几乎每个人都使用 Redirect
来浏览应用程序,并且没有人推荐使用 Link
像这样 发布.
现在 history
可以做与 Link
和 Redirect
相同的事情,除了我有历史堆栈跟踪.
问题 1:我想在什么时候使用 Link
与 Redirect
,另一个用例是什么?
问题 2: 由于 history
可以通过历史堆栈的额外奖励将用户路由到应用程序内的另一个位置,我是否应该始终只使用历史对象路由?
问题 3:如果我想在应用外部路由,那么最好的方法是什么?锚标签、Window.location.href、重定向、链接,以上都不是?
首先,我真的建议通读这个网站:
https://reacttraining.com/react-router/web/api/BrowserRouter
React Router 的 BrowserRouter
为你维护历史堆栈,这意味着你很少需要手动修改它.
但要回答您的问题:
答案 1:您将希望在几乎所有用例中使用 Link
或 NavLink
.Redirect
在特定情况下会派上用场,例如当用户尝试访问未定义的路由时呈现 404 页面.Redirect
会将用户从 404 路由重定向到您选择的新路由,然后用重定向的路由替换历史堆栈中的最后一个条目.
这意味着用户将无法点击浏览器的后退按钮,并返回到 404 路线.
Link
NavLink
和 Redirect
都在幕后使用路由器的 history api,使用这些组件代替手动历史记录意味着您是安全的未来对历史 API 的任何更改.使用这些组件可以让您的代码面向未来.
答案 2: BrowserRouter
为您维护历史堆栈,通常我的意见是您希望尽可能避免手动更新它.
答案 3:以下是外部 React 链接的一些示例:
window.location = 'https://external.com/path'}/>
<a href='https://external.com/path' target='_blank' rel='noopener noreferrer'>常规锚标签效果很好</a>
target='_blank'
将在新标签页中打开链接,但请确保包含 rel='noopener noreferrer'
以防止 漏洞
There seems to be some confusion with what to use over the other:
<Link to='/some/path'>
<Redirect to='/some/path'/>
history.push('/some/path')
I have been using React/Router for a little while now, and different posts/answers say different things regarding when to use these, and sometimes they don't line up with what someone else said. So I think I need some clarification on this.
From what I understand about Link
and this documentation it:
From what I understand about Redirect
and this documentation it:
It seems like all the posts I have read almost everyone uses Redirect
to navigate around there application, and no one ever recommends using Link
like in this post.
Now history
can do the same thing as Link
and Redirect
except I have a history stack trace.
Question 1: When would I want to use Link
vs Redirect
, what's the use case over the other?
Question 2: Since history
can route a user to another location in-app with the added bonus of the history stack, should I always just use the history object when routing?
Question 3: If I want to route outside of the app, what's the best method to do so? Anchor tag, Window.location.href, Redirect, Link, none of the above?
First off, I would really recommend reading through this site:
https://reacttraining.com/react-router/web/api/BrowserRouter
React Router's BrowserRouter
maintains the history stack for you, which means that you rarely need to modify it manually.
But to answer your questions:
Answer 1: You'll want to use Link
or NavLink
in almost all use cases. Redirect
comes in handy in specific situations though, an example is when a 404 page is rendered when the user tries to access an undefined route. The Redirect
will redirect the user from the 404 route to a new route of your choosing, and then replace the last entry in the history stack with the redirected route.
This means that the user will not be able to hit their browser's back button, and return to the 404 route.
Link
NavLink
and Redirect
all use the router's history api under the hood, using these components instead of history manually means that you are safe to any changes to the history api in the future. Using these components future-proofs your code.
Answer 2: BrowserRouter
Maintains the history stack for you, generally my opinion is that you want to stay away from manually updating it where you can.
Answer 3: Here are a few examples for external react links:
<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'
will open the link in a new tab, but please make sure to include rel='noopener noreferrer'
to prevent against vulnerabilities
这篇关于React-Router - 链接 vs 重定向 vs 历史的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!