强制 React-Router <Link>;加载一个页面，即使我们已经在那个页面上 [英] Forcing a React-Router &lt;Link&gt; to load a page, even if we&#39;re already on that page

问题描述

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

Is there a way to force a React-Router <Link> to load a page from path, even when the current location is already that page? I can't seem to find any mention of this in the react-router documentations.

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

We have a page on a route for "apply" that loads up a landing page with a hero image, some explanatory text, etc., and an "apply for this program" button that swaps in content that acts as an application form. This all happens on the same "apply" route, because users should not be able to directly navigate to this form without first hitting the landing page.

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

However, when they have this form open, and they click on the apply link in the nav menu again, the entire page should reload as it would on first mount, getting them "back" (but really, forward) to the landing page again.

相反，点击 <Link> 什么也不做，因为 react-router 看到我们已经在应用"页面上，所以不会卸载当前页面然后挂载不同的一个.

Instead, clicking the <Link> does nothing, because react-router sees we're already on the "apply" page, and so does not unmount the current page to then mount a different one.

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

Is there a way to force it to unmount the current page before then mounting the requested page, even if it's for the page users are supposedly already on? (via a <Link> property for instance?)

推荐答案

我用来解决我的小需求的一个修复是更改位置 React-Router 查看的.如果它看到我们已经在的位置(如您的示例中所示)，它不会做任何事情，但是通过使用位置对象并更改它，而不是使用纯字符串路径，React-Router 将导航"到新位置，即使路径看起来相同.

A fix I used to solve my little need around this was to change the location that React-Router looks at. If it sees a location that we're already on (as in your example) it won't do anything, but by using a location object and changing that, rather than using a plain string path, React-Router will "navigate" to the new location, even if the path looks the same.

你可以通过设置一个 key 和一个 state 来做到这一点，它不同于当前的 key(类似于 React 的渲染依赖于 key)> 允许您围绕想要执行的操作编写清晰代码的属性:

You can do this by setting a key that's different from the current key (similar to how React's render relies on key) with a state property that allows you to write clear code around what you wanted to do:

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 对象传递，但链接会将这些值作为 传递到组件中>道具.所以不要犯尝试访问目标组件中的 this.state 的错误！

Note that (confusingly) you tell the Link which values you need pass as a state object, but the link will pass those values on into the component as props. So don't make the mistake of trying to access this.state in the target component!

然后我们可以在目标组件的 componentDidUpdate 中检查这一点，如下所示:

We can then check for this in the target component's componentDidUpdate like so:

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 
  }
}

这篇关于强制 React-Router <Link>;加载一个页面，即使我们已经在那个页面上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！