React-Router - 链接 vs 重定向 vs 历史 [英] React-Router - Link vs Redirect vs History

问题描述

对于使用什么似乎有些混淆:

• 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:

Provides declarative, accessible navigation around your application.

From what I understand about Redirect and this documentation it:

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.

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 历史的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！