防止React-Router History.Push重新加载当前路由

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在迈出第一步react-router" title="react-router">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吗？

回答：

我的猜测是您的组件会重新渲染，因为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。

以上是 防止React-Router History.Push重新加载当前路由 的全部内容， 来源链接： utcz.com/qa/433203.html

回到顶部