防止 react-router history.push 重新加载当前路由

Question

我正在使用 react-router 迈出我的第一步。

我目前正在使用 hashHistory 用于开发目的，并且我正在执行“手动”导航。也就是说，我 没有 使用 Link 而是调用 history.push('/some/route'); 以进行导航（响应对锚标记的普通旧点击）。

我注意到的是，即使我已经在目标路线上， react-router 每次调用 history.push('/target/route'); 时都会重新呈现相关的目标组件：在每次 push('/target/route') ：

• URL 的片段部分保留 #/target/route
• URL 的查询字符串部分更改为 ?_k=somethingRandom
• 目标组件重新渲染

我希望重新渲染 不会 发生——我实际上预计 history.push 是一个空操作，当我已经在我尝试的路线上 push 。

我显然遗漏了一些东西，因为这不是正在发生的事情。有趣的是，我看到有人发帖试图 实现 我想摆脱的行为——可以这么说，他们想在不离开路线的情况下“刷新”路线。这看起来很像相反的问题:)。

你能告诉我我误解了什么以及我将如何实现所需的行为吗？如果（当）我切换到 browserHistory 时，这可能会消失吗？

原文由 biril 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我的猜测是，您的组件重新呈现是因为您的 prop 中的某些内容在您进行路由器推送时发生了变化。我怀疑它可能是 action 或 key 的属性 prop.location 。您始终可以在每次渲染期间检查 prop 的所有值，以查看有何变化。

您可以通过在 shouldComponentUpdate 生命周期方法中将旧路由路径与新路由路径进行比较来解决此问题。如果它没有改变你在同一条路线上，你可以通过返回 false 来防止重新渲染。在所有其他情况下，返回 true 。默认情况下，这总是返回 true。

 shouldComponentUpdate: function(nextProps, nextState) {
  if(this.props.route.path == nextProps.route.path) return false;
  return true;
}

您必须进行进一步检查，这将阻止您的组件更新 state 组件内的更新，但我想这将是您的起点。

在官方 React 文档 页面上阅读有关 shouldComponentUpdate 的更多信息。

当您确定到新道具和状态的转换不需要组件更新时，将此作为返回 false 的机会。

原文由 Chris 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我有同样的问题，我找到了（愚蠢的）解决方案。

你只有一个 <button> （默认按钮是 type=submit ）或类似的东西（表单，提交……等）就像html一样重新加载页面 <form method=GET ...> 。

在您的代码中检查它，然后将其删除。

PD: _k=somethingRandom > 这只是您在表单中发送的值输入（或按钮）。

原文由 Francisco Rojas Rodríguez 发布，翻译遵循 CC BY-SA 4.0 许可协议