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

Question

我迈出了第一步react-router.

我目前正在使用hashHistory开发目的,我正在执行"手动"导航.也就是说,我没有使用Link我正在调用history.push('/some/route');以便导航(响应对锚标签的普通旧点击).

我注意到的是,即使我已经在目标路径上,react-router每次history.push('/target/route');调用时都会重新渲染相关的目标组件:每一个push('/target/route'):

我希望重新渲染不会发生 - history.push当我已经在我正在尝试的路线时,我实际上期望成为无操作push.

我显然错过了一些东西,因为这不是正在发生的事情.有趣的是,我正在看到那些试图实现我想要摆脱的行为的人的帖子- 他们想要"刷新"一条路线而不会离开它,可以这么说.这看起来很像相反的问题:).

你能告诉我这是什么,我误解了,我将如何实现理想的行为？如果(当)切换到这个时,这可能会消失browserHistory吗？

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组件内的更新,但我想这将是您的起点.

阅读shouldComponentUpdate官方反应文档页面上的更多信息.

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