防止 react-router history.push 重新加载当前路由 [英] Prevent react-router history.push from reloading current route

问题描述

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

I'm taking my first steps with react-router.

我目前将 hashHistory 用于开发目的，并且我正在执行手动"导航.也就是说，我不使用 Link 并且我正在调用 history.push('/some/route');为了导航(响应对锚标记的普通点击).

I'm currently using the hashHistory for development purposes and I'm performing 'manual' navigation. That is to say, I'm not using Link and I'm invoking history.push('/some/route'); in order to navigate (in response to plain old clicks on anchor tags).

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

What I'm noticing is that, even when I'm already on the target route, react-router will re-render the relevant target component every time history.push('/target/route'); is invoked: On every push('/target/route'):

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

我希望重新渲染不会发生 - 我实际上希望 history.push 在我已经在路线上时没有操作我正在尝试push.

I would like for that re-rendering to not happen - I actually expected history.push to be a no-op when I'm already at the route that I'm attempting to push.

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

I'm apparently missing something, as this is not what's happening. Funnily enough I'm seeing posts from people who are trying to achieve the behaviour that I'd like to get rid of - they'd like to 'refresh' a route without leaving it, so to speak. Which looks pretty much like the opposite problem :).

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

Could you enlighten me as to what it is I'm misunderstanding and how I would achieve the desired behaviour? Is this perhaps something that would go away if (when) I switch to browserHistory?

推荐答案

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

My guess is that your component re-renders because something in your prop changes when you make a router push. I suspect it might be the action or key properties of prop.location. You could always check all the values of prop during each render to see what changes.

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

You can solve this issue by comparing your old route path with the new one in the shouldComponentUpdate life-cycle method. If it hasn't changed you are on the same route, and you can prevent the re-rendering by returning false. In all other cases, return true. By default this always returns true.

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

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

You'll have to make further checks as well as this will prevent your component from updating on state updates within the component as well, but I guess this would be your starting point.

在官方 react 文档 页面.

Read more about shouldComponentUpdate on the official react docs page.

当您确定转换到新的 props 和 state 不需要组件更新时，可以以此为契机返回 false.

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.

这篇关于防止 react-router history.push 重新加载当前路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！