当前位置: 首页 > 知识库问答 >
问题:

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

阎单鹗
2023-03-14

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

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

在应用程序周围提供声明式、可访问的导航。

会导航到一个新的位置。新位置将覆盖历史堆栈中的当前位置,就像服务器端重定向(HTTP 3xx)一样。

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

现在历史记录可以做与链接重定向相同的事情,除了我有一个历史堆栈跟踪。

问题1:我什么时候想使用Linkvs重定向,用例是什么?

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

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


共有1个答案

梁渊
2023-03-14
匿名用户

首先,我真的建议大家浏览一下这个网站
https://reacttraining.com/react-router/web/api/BrowserRouter

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

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

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

LinkNavLink重定向都在引擎盖下使用路由器的历史api,使用这些组件而不是手动使用历史意味着您对未来历史api的任何更改都是安全的。使用这些组件对代码进行未来验证。

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

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

<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',以防止漏洞

 类似资料:
  • 我正在尝试React-路由器(v4),我有问题启动的Nav有一个的。如果我单击任何标记,则活动内容开始工作。然而,我希望首页在应用程序启动后立即激活,因为这是在路由加载的组件。有什么办法可以做到这一点吗? 这是我目前的代码:

  • 问题内容: 我正在从本教程中学习,但始终收到此错误: “ react-router”不包含名为“ browserHistory”的导出。 具有react-router的文件是这样的: 问题答案: 您现在需要从历史记录模块中获取。 请注意,他们最近更改了模块API,因此,如果您使用的是最新版本,则导入会稍有变化:

  • 我已经稍微调整了React路由器的私有路由示例,以便与Redux玩得很好,但是当链接或重定向到其他页面时,不会呈现任何组件。这个例子可以在这里找到: https://reacttraining.com/react-router/web/example/auth-workflow 他们的PrivateRoute组件如下所示: 但是,因为我已经把它合并到一个Redux应用程序中,我不得不稍微调整一下私

  • 在我的项目中,我使用React路由器DOM 5.2.0。我必须使用

  • 问题内容: 我正在使用react-redux和标准react-routing。确定动作后,我需要重定向。 例如:我已经注册了几个步骤。并采取以下措施: 我希望他重定向到带有registrationStep2的页面。怎么做? ps在历史浏览器中从未使用过“ / registrationStep2”。仅在成功注册结果步骤1页面之后,才会显示此页面。 问题答案: 使用React Router 2+,无论

  • 我在react-redux项目中使用react-router-dom 5.1.2。对于我的路由,我有两个文件。第一个是App.js,其中包含redux存储和BrowserRout的提供程序: 在下一层,我有Main.js,它有到所有组件的路径 我遇到的问题是,当我使用path=“/games/:game_id/fighters/new”进入路线时,而不是显示FighterForm。js,它会重定向