react-router - 强制 React-Router <Link> 加载页面,即使我们已经在该页面上

标签 react-router

有没有办法强制 React-Router <Link>从路径加载页面,即使当前位置已经是该页面?我似乎在 react-router 文档中找不到任何提及。

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

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

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

有没有办法强制它在加载请求的页面之前卸载当前页面,即使它是针对用户应该已经在的页面? (例如通过 <Link> 属性?)


注意:这个问题是在 React-Router 意味着 v5 时发布的,虽然这篇文章中的问题独立于特定的 React-Router 版本,但解决方案不是。因此,公认的答案是 React-Router v6 的解决方案,所以如果您仍在使用 v5,首先也是最重要的是升级您的 React-Router 版本,但如果您绝对不能,the accepted answer不会为你工作,你会想要this answer相反。

最佳答案

在 Route 组件中,指定一个随机键。

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

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

关于react-router - 强制 React-Router <Link> 加载页面,即使我们已经在该页面上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62811388/

相关文章:

reactjs - 关于在未安装的组件上调用 setState 的警告

reactjs - "Uncaught TypeError: Cannot read property ' 类型 ' of undefined"并不清楚它与什么相关

javascript - 链接参数不会在 JSX 中呈现( react )

reactjs - 为客户端渲染 React 项目做 SEO 的最佳方式

javascript - 如何在 React JS 中将一个组件的值发送到另一个组件?

javascript - React-router多个组件在auth情况下onEnter?

reactjs - React + React Router 中的范围界定

reactjs - 如何在浏览器刷新后保持 React 组件状态

reactjs - React-router v1.0.0 中的 Router.create

reactjs - react-router-dom 不起作用