React-Router - Link vs 重定向 vs 历史
React-Router - Link vs Redirect vs History
似乎对使用什么比另一个感到困惑:
<Link to='/some/path'>
<Redirect to='/some/path'/>
history.push('/some/path')
我使用 React/Router 已经有一段时间了,不同的 posts/answers 关于何时使用它们有不同的说法,有时他们与其他人所说的并不一致。所以我想我需要对此进行一些澄清。
根据我对 Link
和这个 documentation 的了解:
Provides declarative, accessible navigation around your application.
根据我对 Redirect
和这个 documentation 的了解:
Will navigate to a new location. The new location will override the current location in the history stack, like server-side redirects (HTTP 3xx) do.
似乎我读过的所有帖子几乎每个人都使用 Redirect
来浏览应用程序,并且没有人推荐使用 Link
就像在这个 中一样。
现在 history
可以做与 Link
和 Redirect
相同的事情,除了我有一个历史堆栈跟踪。
问题 1: 我什么时候想使用 Link
与 Redirect
,另一个的用例是什么?
问题 2: 由于 history
可以将用户路由到应用程序内的另一个位置,并具有历史堆栈的额外好处,我是否应该始终只使用历史记录路由时的对象?
问题 3:如果我想在应用程序 外部 路由,最好的方法是什么?锚标签,Window.location.href,重定向,Link,none 以上?
首先,我强烈建议您通读此站点:
https://reacttraining.com/react-router/web/api/BrowserRouter
React Router 的 BrowserRouter
为您维护历史堆栈,这意味着您很少需要手动修改它。
但是要回答你的问题:
答案 1: 您将希望在几乎所有用例中使用 Link
或 NavLink
。 Redirect
在特定情况下派上用场,例如当用户尝试访问未定义的路由时呈现 404 页面。 Redirect
会将用户从 404 路由重定向到您选择的新路由,然后用重定向的路由替换历史堆栈中的最后一个条目。
这意味着用户将无法点击浏览器的后退按钮,并且 return 到 404 路由。
Link
NavLink
和 Redirect
都在后台使用路由器的历史记录 api,使用这些组件而不是手动历史记录意味着您可以安全地进行任何更改到未来的历史api。使用这些组件可以使您的代码面向未来。
答案2: BrowserRouter
为您维护历史堆栈,一般我的意见是您希望尽可能避免手动更新它。
回答3:这里有几个外部反应的例子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'
将在新选项卡中打开 link,但请确保包含 rel='noopener noreferrer'
以防止 vulnerabilities
似乎对使用什么比另一个感到困惑:
<Link to='/some/path'>
<Redirect to='/some/path'/>
history.push('/some/path')
我使用 React/Router 已经有一段时间了,不同的 posts/answers 关于何时使用它们有不同的说法,有时他们与其他人所说的并不一致。所以我想我需要对此进行一些澄清。
根据我对 Link
和这个 documentation 的了解:
Provides declarative, accessible navigation around your application.
根据我对 Redirect
和这个 documentation 的了解:
Will navigate to a new location. The new location will override the current location in the history stack, like server-side redirects (HTTP 3xx) do.
似乎我读过的所有帖子几乎每个人都使用 Redirect
来浏览应用程序,并且没有人推荐使用 Link
就像在这个
现在 history
可以做与 Link
和 Redirect
相同的事情,除了我有一个历史堆栈跟踪。
问题 1: 我什么时候想使用 Link
与 Redirect
,另一个的用例是什么?
问题 2: 由于 history
可以将用户路由到应用程序内的另一个位置,并具有历史堆栈的额外好处,我是否应该始终只使用历史记录路由时的对象?
问题 3:如果我想在应用程序 外部 路由,最好的方法是什么?锚标签,Window.location.href,重定向,Link,none 以上?
首先,我强烈建议您通读此站点:
https://reacttraining.com/react-router/web/api/BrowserRouter
React Router 的 BrowserRouter
为您维护历史堆栈,这意味着您很少需要手动修改它。
但是要回答你的问题:
答案 1: 您将希望在几乎所有用例中使用 Link
或 NavLink
。 Redirect
在特定情况下派上用场,例如当用户尝试访问未定义的路由时呈现 404 页面。 Redirect
会将用户从 404 路由重定向到您选择的新路由,然后用重定向的路由替换历史堆栈中的最后一个条目。
这意味着用户将无法点击浏览器的后退按钮,并且 return 到 404 路由。
Link
NavLink
和 Redirect
都在后台使用路由器的历史记录 api,使用这些组件而不是手动历史记录意味着您可以安全地进行任何更改到未来的历史api。使用这些组件可以使您的代码面向未来。
答案2: BrowserRouter
为您维护历史堆栈,一般我的意见是您希望尽可能避免手动更新它。
回答3:这里有几个外部反应的例子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'
将在新选项卡中打开 link,但请确保包含 rel='noopener noreferrer'
以防止 vulnerabilities