React router 强制反应路由器<；链接>；加载页面，即使我们'；你已经在那一页了

有没有办法强迫React路由器

从路径加载页面，即使当前位置已经是该页面？在react路由器的文档中，我似乎找不到任何关于这一点的提及

我们有一个“应用”路径页面，它加载一个带有英雄图像、一些解释性文本等的登录页面，还有一个“应用此程序”按钮，它交换作为申请表的内容。这一切都发生在相同的“应用”路径上，因为用户不应该在不首先点击登录页的情况下直接导航到此表单

但是，当他们打开此表单，并再次单击导航菜单中的应用链接时，整个页面应该像第一次装载时一样重新加载，使其再次“返回”（但实际上是向前）到登录页面

相反，单击

不会执行任何操作，因为react router会看到我们已经在“应用”页面上，因此不会卸载当前页面，然后装载其他页面

---

是否有办法强制it卸载当前页面，然后再装载请求的页面，即使该页面是为假定用户已经打开的页面而安装的？（例如，通过

属性？

不是一个好的解决方案，因为它会强制整页刷新并引发错误，但您可以使用onClick处理程序调用forceUpdate（），如：

<Link onClick={this.forceUpdate} to={'/the-page'}>
    Click Me
</Link>

点击我

我所能说的就是它是有效的。我自己也遇到了类似的问题，希望其他人有更好的答案

---

我用来解决这个问题的一个小问题是改变React路由器的外观。如果它看到我们已经在的位置（如您的示例中），它不会做任何事情，但是通过使用location对象并更改它，而不是使用普通字符串路径，React Router将“导航”到新位置，即使路径看起来相同

您可以通过设置一个与当前键不同的

键

（类似于React的渲染依赖

键

）和一个

状态

属性来完成此操作，该属性允许您围绕要执行的操作编写清晰的代码：

render（）{
常量链接目标={
路径名：“/页”，
key:uuid（），//我们可以使用Math.random，但不能保证唯一。
声明：{
应用：正确
}
};
返回(
...
页
...
);
}

请注意（令人困惑的是）您告诉

链接

哪些值需要作为

状态

对象传递，但链接会将这些值作为

道具

传递到组件中。因此，不要错误地尝试访问目标组件中的

this.state

然后，我们可以在目标组件中进行检查，如下所示：

componentDidUpdate（prevProps、prevState、快照）{
//检查“应用”标志是否已更改（不仅仅是“设置”）
if（this.props.location.state.applicated&！prevProps.location.state.applicated）{
//在这里做事
}
}

您可以使用生命周期方法-componentWillReceiveProps 当您单击链接时，位置道具的键将更新。所以，你可以做一个变通办法，比如下面

/**
 * @param {object} nextProps new properties
 */
    componentWillReceiveProps = (nextProps)=> {
        if (nextProps.location.pathname !== this.props.location.pathname) {
            window.location.reload();
        }
    };

---

在管线组件中，指定随机关键点

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

}/>

---

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

我通过将新路由推到历史记录中，然后用当前路由（或要刷新的路由）替换该路由来解决此问题。这将触发react路由器“重新加载”路由，而不刷新整个页面

<Link onClick={this.reloadRoute()} to={'/route-to-refresh'}>
    Click Me
</Link>

let reloadRoute = () => {
    router.push({ pathname: '/empty' });
    router.replace({ pathname: '/route-to-refresh' });
}

点击我
让重新加载路由=（）=>{
push（{pathname:'/empty'}）；
replace（{pathname:'/route to refresh'}）；
}

React router的工作原理是使用浏览器历史记录进行导航，而无需重新加载整个页面。如果您强制路由进入历史记录，路由器将检测到该情况并重新加载路由。更换空行路线很重要，这样在按下按钮后，后退按钮不会将您带到空行路线

---

据了解，react路由器库似乎不支持此功能，而且可能永远也不会支持，因此您必须以一种黑客方式强制刷新。

尝试使用锚定标记a href链接。在标记中使用

target=“\u self”

，强制页面完全重新加载

这可能是一个常见的问题，我正在寻找一个合适的解决方案，以便下次在我的toolbet中使用React Router提供了一些机制，可以知道用户何时尝试访问任何页面，即使是他们已经访问过的页面

阅读

location.key

hash，这是一种完美的方法，因为每当用户尝试在任何页面之间导航时，它都会发生变化

componentDidUpdate (prevProps) {
    if (prevProps.location.key !== this.props.location.key) {
        this.setState({
            isFormSubmitted: false,
        })
    }
}

设置新状态后，将调用render方法。在本例中，我将状态设置为默认值

---

参考资料：

使用Rachita Bansal答案解决，但使用的是componentDidUpdate，而不是componentWillReceiveProps

componentDidUpdate(prevProps) {
    if (prevProps.location.pathname !== this.props.location.pathname) { window.location.reload();
    }
}

---

老实说，这些都不是真正的“思考-反应”。对于那些关注这个问题的人来说，完成相同任务的更好的替代方法是使用组件状态

将路由组件的状态设置为布尔值或可以跟踪的值：

this.state = {
    isLandingPage: true // or some other tracking value
};

---

当您想转到下一个路由时，只需更新状态并在所需组件中加载渲染方法。

我的工作方式与@peiti li在react router dom v5.1.2中的回答略有不同，因为在我的情况下，我的页面在尝试解决方案后陷入无限渲染循环

<BrowserRouter forceRefresh={true} />

下面是我所做的

<Route
  path="/mypath"
  render={(props) => <MyComponent key={props.location.key} />}
/>

}
/>

每次路线改变时，即使用户已经在同一条路线上，

location.key

prop也会改变。根据react router dom文档：

而不是使用 组件属性时，可以传入要调用的函数 瞧

this.props.history.push("/my/path");

function MenuLink({ to, children }) {
    const location = useLocation();
    const history = useHistory();
    const isCurrentPage = () => location.pathname === to;
    const handler = isCurrentPage() ? () => {
        setTimeout(() => {
            if (isCurrentPage()) {
                history.replace("/refresh?url=" + encodeURIComponent(to))
            }
        }, 0);
    } : undefined;

    return <Link to={to} onClick={handler}>{children}</Link>;
}

<Switch>
        <Route path="/refresh" render={() => <Redirect to={parseQueryString().url ?? "/"} />} />
        {/* ...rest of routes go here... */}
<Switch>

<a href='/'>

<BrowserRouter forceRefresh={true} />