强制 React-Router 加载页面,即使我们已经在该页面上

2023-12-13

有没有办法强制React-Router<Link>从路径加载页面,即使当前位置已经是该页面?我似乎在反应路由器文档中找不到任何提及这一点的信息。

我们在“申请”路线上有一个页面,该页面加载带有英雄图像、一些解释性文本等的登陆页面,以及一个“申请此计划”按钮,该按钮可交换充当申请表的内容。这一切都发生在同一个“应用”路径上,因为用户不应该先点击登陆页面就无法直接导航到此表单。

但是,当他们打开此表单并再次单击导航菜单中的应用链接时,整个页面应该像第一次安装时一样重新加载,让他们再次“返回”(但实际上是前进)到登陆页面。

相反,单击<Link>什么都不做,因为react-router看到我们已经在“应用”页面上,所以不会卸载当前页面然后安装另一个页面。

有没有办法force它在安装请求的页面之前卸载当前页面,即使它是针对用户应该已经在的页面? (通过<Link>例如财产?)


注意:这个问题是在 React-Router 指的是 v5 时发布的,虽然这篇文章中的问题与特定的 React-Router 版本无关,但解决方案却不是。因此,公认的答案是 React-Router v6 的解决方案,所以如果你仍在使用 v5,首先也是最重要的是升级你的 React-Router 版本,但如果你绝对不能,接受的答案不会为你工作,你会想要这个答案反而。


在“路由”组件中,指定一个随机密钥。

<Route path={YOURPATH} render={(props) => <YourComp {...props} keyProp={someValue} key={randomGen()}/>} />

当反应看到不同的键时,它们将触发重新渲染。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

强制 React-Router 加载页面,即使我们已经在该页面上 的相关文章

  • 将 props 传递给每个组件

    我正在类内部通过 React Router 渲染一堆路由 我需要组件能够访问正在触发渲染的类的实例 因为它将包含服务工厂的实例等 但是 我找不到任何有关将 props 传递到通过 React Router 渲染的组件的信息 或者对我来说更有
  • React Native 中组件之间的导航

    我需要在 React Native 的两个视图之间导航 但问题是我的组件 其中导航按钮位于其他组件上 我使用反应导航 我来给你展示 我在这里有我的组件 MainPage class MainPage extends Component re
  • React Router v4 NavLink 活动路由

    我正在尝试使用 v3 移植我的项目react router到现在所谓的 v4react router dom 现在 当我有一个 MenuBar 组件时 问题就出现了 该组件与路由逻辑完全分开 如您所期望的 因为无论当前路径是什么 它都会显示
  • 在组件之间路由时如何保持 React 新的 Context API 状态?

    Summary 1 你知道当通过路由挂载 卸载时如何保持Context Provider的状态吗 2 或者你知道一个维护良好的 Flux 实现支持多个独立的存储吗 详细地 除了 React 组件自己的状态之外 到目前为止我主要使用的是 re
  • useLocation 挂钩 - 确定过去的位置

    根据 React Router 5 1文档 https v5 reactrouter com web api location应该可以看到 应用程序现在在哪里 你想让它去哪里 甚至它曾经在哪里 在我的应用程序中 我需要查看 它在哪里 我访问
  • React-Router v5 History.push 不触发组件

    很抱歉朋友们又问这个问题了 我找到了解决这个问题的几个方法 但他们让我很困惑 我只是想问一个优雅的方法来做到这一点 正如你通过标题所理解的 我有一个关于反应路由的问题 让我解释 我有一个按钮 其名称是Login 单击按钮后 我执行了一些逻辑
  • 纯组件在没有变化时渲染?

    我有一个像这样的纯组件 interface Props checkBoxTitleStyle any checkBoxBackgroundColor any onPressCheckBox id isChecked selectedArra
  • React router + redux 导航回来不会调用 componentWillMount

    目前 我在容器组件的生命周期方法 componentWillMount 中预加载来自 api 的数据 componentWillMount const dept course this props routeParams this prop
  • 如何从另一个Page调用useState?

    基本上 每当我在 handleDelete 函数中删除一个项目时 它都会路由回主页 并且我想显示一条消息 说明您的产品已成功删除大约 5 秒钟 在我的 index js 中 我首先将 message 设置为 false 在我的 Produc
  • 使用默认值反应路由参数

    我正在使用 React 功能组件和 React Router v5 我正在使用 useParam 函数来获取参数 当参数不可用或未定义时 如何设置参数的默认值 我的路由器代码
  • 如何使用反应路由器在重定向上传递参数?

    我正在使用 React router 版本 2 0 1 在组件之间进行导航 我遇到了一个场景 我想动态导航到其他组件 我做了这样的事情来重定向 browserHistory push some path 它正在完美地导航到其他组件 但我还想
  • React DOM Router 不会重定向链接

    我正在尝试使用react dom router包在我的 React 应用程序中 但我没有被成功 重定向 到该组件 仅当我刷新页面或通过 URL 访问时它才起作用 这是我的App js import React Component from
  • 在react-router转换期间我应该如何更新redux存储?

    我面临着如何在发生反应路由器转换时更新存储的问题 在我当前的实现中 如下 在渲染下一页之前更新存储 当当前页面根据下一页的数据获取商店更新时 就会出现问题 1 当前页面毫无意义地呈现 它订阅了商店更新 因为更新的商店是针对下一页的 2 当前
  • 如何聚焦反应路由器链接

    我有一个用于搜索的输入框 并且希望能够按向下键将焦点从输入移动到列表的第一个s 看来我这里的东西不起作用 因为不是实际的 DOM 节点 我能够使用它来工作 a 代替 though let Link require react router
  • react-router+antD/ 如何在按下后退/前进按钮时突出显示菜单项?

    我创建了一个菜单 想突出显示我选择的项目 我做到了 但是当我按后退 前进按钮时 菜单项不会突出显示 我应该怎么办 我尝试使用 addEventListener 但失败了 有人可以给一些建议吗 class Sidebar extends Re
  • React Typescript - 在路由中传递时如何将类型添加到 location.state

    当我将react router props发送到路由中的组件时 我收到错误 因为我有特定的状态 我传递了该组件 但错误显示在我的路由中 这是路线代码
  • React Router 不渲染组件

    我想创建一个带有登录名的 React 应用程序 为了维护用户状态 我想使用上下文API https reactjs org docs context html随 React 16 3 引入 在实现登录路由时 我遵循了React Router
  • React-router 与 React-router-dom,何时使用其中之一?

    两者都有路由 链接等 什么时候使用其中之一 我真的很困惑在哪里使用每一个 服务器端 客户端 https reacttraining com react router https reacttraining com react router
  • React Router - 如何约束路由匹配中的参数?

    我真的不知道如何使用正则表达式等来约束参数 如何区分这两条路线呢
  • 使用 Jest 测试来自 React-router v4 的链接

    我在用着jest测试一个组件从反应路由器 v4 开始 我收到警告需要来自反应路由器的上下文

随机推荐

  • 创建 atoi 函数

    我正在尝试创建自己的 atoi 函数 通过以下代码 我得到的返回值为 0 无论我更改函数中的数字变量 我都会得到返回值 关于修改代码有什么建议吗 my atoi function int atoi me char numstring int
  • HttpClient 中使用 wait 的异步调用永远不会返回

    我正在从基于 xaml 的内部拨打电话 C Win8 CP上的metro应用 此调用只需访问 Web 服务并返回 JSON 数据 HttpMessageHandler handler new HttpClientHandler HttpCl
  • 阻止直接 URL 访问图像文件?

    我想阻止人们通过在浏览器地址栏中输入 URL 来获取我网站的图像 同时允许他们在访问网页时查看图像 我尝试了以下 htaccess 代码 RewriteEngine on RewriteCond HTTP REFERER http www
  • JSF 2.0 简单登录页面

    我需要限制对应用程序的一部分的访问 为了访问该部分 用户需要登录 我的数据库中有一个名为 User 的表 其中包含用户名和散列密码以及由两个输入和一个提交组成的登录表单 但是 我不知道应该使用哪些类 数学来登录用户 我假设 jsf 中支持此
  • 保持mysql连接的正确方法[重复]

    这个问题在这里已经有答案了 我有一个 24 7 运行的应用程序 它使用 mysql 它的不同功能都使用mysql 实现它的一种方法是在应用程序中创建一个全局 mysql 实例 如下所示 self db MySQLdb connect hos
  • 导出 Room 数据库并附加到电子邮件 Android Kotlin

    我有以下代码用于导出房间数据库 然后将其附加到电子邮件中 目前 用户首先必须选择要保存数据的位置 然后才能附加数据 有没有一种方法可以做到这一点 而不必首先询问用户在哪里保存数据库 这是我的代码 fun exportDatabase val
  • 如何在 iis 服务器上启用 mod_rewrite

    我发现我的服务器上没有启用 mod rewrite 功能 SERVER SERVER SOFTWARE Microsoft IIS 7 0 架构 x86 我如何启用 mod rewrite 有人可以帮助我吗 对我有用的答案是安装微软 URL
  • 在 MKMapView 中设置当前位置图标下侧

    我想在地图下方显示我当前的位置 iOS 6 和 iOS 7 如下面的屏幕截图所示 用户可以看到进一步的视图 带有谷歌地图的谷歌默认应用程序 Right now the cursor that shows center in the view
  • 当服务器处于Unix套接字时如何连接到数据库?

    我与数据库 phpmyadmin 的连接有问题 这只是因为我的服务器位于 UNIX 套接字中 我不知道如何连接到它 我站在窗户上 如果我的服务器采用 TCP IP 下面的代码可以正常工作 My code
  • JQuery:ajax 请求时出现“未捕获类型错误:非法调用”

    我正在使用这个 AJAX 函数将我的表单发布到特定的 URL 它正在获取所需的 URL 并进行处理 但是当它返回结果时 它会给出错误
  • 如何避免实体框架 4.3.1 中的重复插入

    我有一个使用代码优先方法创建的小模型 一个类City其中仅包含有关城市名称的信息 public class City public City Posts new List
  • 将 System.Drawing.Icon 转换为 Microsoft.UI.Xaml.ImageSource

    存在将 System Drawing Icon 转换为 System Media ImageSource 将 System Drawing Icon 转换为 System Media ImageSource 但是当我使用WinUI而不是WP
  • 将 InkCanvas 笔画转换为字节数组并再次转换回来

    我正在开发一个程序 它将 inkcanvas 笔划转换为字节数组进行加密 然后将其保存在 txt 文件中 本质上我需要将字节数组转换为 inkcanvas 笔划 我已经完成了代码的前半部分 它将 inkcanvas 笔划转换为字节数组 pr
  • Fluent NHibernate 将一列映射到两列之一

    我正在处理一些无法修改的旧供应商代码 我想用一个更易于使用的抽象层来包装数据库 给定以下两个表 我需要为 Process Route 创建一个映射 它将找到给定进程的匹配路由 但可以是 dbo Route SourceProcessID 或
  • iOS 5 中拖动 UIView

    我在 iPhone 应用程序中看到状态栏上有一个可以访问通知中心的手势 我如何在我的应用程序中实现这种转换 我认为这是通过滑动手势识别器完成的 但是如何包含从上到下的滑动手势 如何拖动通知中心完成其完整过渡 有任何示例代码或其他东西可以帮助
  • 使用字符数组作为字符串流缓冲区

    我正在寻找一种干净的 STL 方法来使用现有的 C 缓冲区 char 和 size t 作为字符串流 我更喜欢使用 STL 类作为基础 因为它具有内置的保护措施和错误处理 注意 我不能使用额外的库 否则我会使用文本流 你可以尝试使用std
  • django ALLOWED_HOSTS 不工作

    我的 settings py 文件包含 DEBUG False ALLOWED HOSTS u mydomainxxx com 但是 我可以像这样触发卷曲请求 curl X GET https mydomainxxx com api H A
  • PermissionError: [Errno 13] 权限被拒绝: '/code/manage.py'

    我试图在 docker 容器上运行 django 应用程序 按照以下提到的步骤操作https docs docker com compose django 但运行命令后docker compose run web django admin
  • 为什么这个 for 循环不处理完整的数据集?

    背景 我有一个活动门票分配的电子表格 电子表格的每一行都有一个名称和分配的票数 我需要更改电子表格 以便每个票证的每个名称在不同的行上重复一次 如下所示 我有一个宏可以做到这一点 但它表现出奇怪的行为 问题 该宏不会循环遍历整个数据集 单步
  • 强制 React-Router 加载页面,即使我们已经在该页面上

    有没有办法强制React Router从路径加载页面 即使当前位置已经是该页面 我似乎在反应路由器文档中找不到任何提及这一点的信息 我们在 申请 路线上有一个页面 该页面加载带有英雄图像 一些解释性文本等的登陆页面 以及一个 申请此计划 按