有没有办法强制 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/