我正在迈出第一步react-router。
react-router
我目前正将其hashHistory用于开发目的,并且正在执行“手动”导航。就是说,我 没有 使用Link,而是在调用history.push('/some/route');以进行导航(以响应对锚标记的简单老式点击)。
hashHistory
Link
history.push('/some/route');
我要注意的是,即使我已经在目标路线上,react- router每次history.push('/target/route');调用时也会重新渲染相关的目标组件push('/target/route'):
react- router
history.push('/target/route');
push('/target/route')
#/target/route
?_k=somethingRandom
我希望这种重新渲染 不会 发生-实际上history.push,当我已经在尝试的路线上时,我实际上希望成为无操作者push。
history.push
push
我显然缺少了一些东西,因为这不是正在发生的事情。有趣的是,我收到了一些尝试 实现 我希望摆脱的行为的人的帖子- 可以这么说,他们想“刷新”一条路线而不离开它。看起来很像相反的问题:)。
您能启发我什么是误解,以及如何实现期望的行为吗?如果(当)我改用,这也许会消失browserHistory吗?
browserHistory
我的猜测是您的组件会重新渲染,因为prop在进行路由器推送时您所做的更改有所改变。我怀疑这可能是的action或key属性prop.location。您总是可以检查prop每个渲染期间的所有值,以查看发生了什么变化。
prop
action
key
prop.location
您可以通过将您的旧路径路径与shouldComponentUpdate生命周期方法中的新路径路径进行比较来解决此问题。如果尚未更改,则您位于同一条路线上,可以通过返回阻止重新渲染false。在其他所有情况下,请返回true。默认情况下,它始终返回true。
shouldComponentUpdate
false
true
shouldComponentUpdate: function(nextProps, nextState) { if(this.props.route.path == nextProps.route.path) return false; return true; }
您将必须进行进一步的检查,因为这也将阻止您的组件state在组件内的更新上进行更新,但是我想这将是您的起点。
state
shouldComponentUpdate在官方的 react docs 页面上了解更多信息。
当您确定过渡到新的道具和状态将不需要组件更新时,可以利用此机会返回false。