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

Question

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

我目前正在使用 hashHistory 进行开发，并且我正在执行“手动”导航。也就是说，我不使用Link，而是调用history.push('/some/route');为了导航(响应对 anchor 标签的普通点击)。

我注意到的是，即使我已经在目标路线上，react-router 也会在每次 history.push('/target/route'); 被调用:在每个 push('/target/route') 上:

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

我希望重新渲染不发生——我实际上期望history.push在我已经在路线上时是一个空操作我正在尝试推送。

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

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

Answer 1

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

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

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

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

在官方 react docs 上阅读有关 shouldComponentUpdate 的更多信息页面。

Use this as an opportunity to return false when you're certain that the transition to the new props and state will not require a component update.