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

Question

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

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

然而，当他们打开这个表单，并再次点击导航菜单中的应用链接时，整个页面应该像第一次装载一样重新加载，让它们再次“返回”(但实际上，向前)到登录页面.

相反，单击 <Link> 没有任何作用，因为 react-router 看到我们已经在“应用”页面上，因此不会卸载当前页面然后挂载另一个页面。

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

Answer 1

我用来解决我的小需求的一个修复是更改 React-Router 所查看的 location。如果它看到我们已经在的位置(如您的示例中所示)，它不会做任何事情，但是通过使用位置对象并更改它，而不是使用纯字符串路径，React-Router 将“导航”到新位置，即使路径看起来相同。
您可以通过设置一个与当前键不同的 key(类似于 React 的渲染依赖 key 的方式)和一个 state 属性来实现这一点，该属性允许您围绕您想要做的事情编写清晰的代码:

render() {
  const linkTarget = {
    pathname: "/page",
    key: uuid(), // we could use Math.random, but that's not guaranteed unique.
    state: {
      applied: true
    }
  };

  return (
    ...
    <Link to={linkTarget}>Page</Link>
    ...
  );
}

请注意(令人困惑地)您告诉 Link 您需要将哪些值作为 state 对象传递，但链接会将这些值作为 props 传递到组件中。所以不要犯尝试访问目标组件中的 this.state 的错误!
然后我们可以像这样在目标组件的 componentDidUpdate 中检查这个:

componentDidUpdate(prevProps, prevState, snapshot) {
  // Check to see if the "applied" flag got changed (NOT just "set")
  if (this.props.location.state.applied && !prevProps.location.state.applied) {
    // Do stuff here 
  }
}