react-router搭配react-redux没法监听路由变化的问题

在react中,要将react组件链接到redux中,一般会这样包装组件html

class Home extends Component {

}

function select(state) {
  return {
    logBox:state.logBox
  }
}

export default connect(select)(Home)

可是当搭配react-router的时候,在进行路由跳转的时候,组件不会从新render。这个时候看react-redux的connect方法的说明:react

connect([mapStateToProps][mapDispatchToProps][mergeProps],[options])

mapStateToProps(state[ownProps]):若是定义该参数,组件将会监听 Redux store 的变化。git

mapDispatchToProps(dispatch[ownProps]):若是传递的是一个对象,那么每一个定义在该对象的函数都将被看成 Redux action creator,并且这个对象会与 Redux store 绑定在一块儿,其中所定义的方法名将做为属性名,合并到组件的 props 中。若是传递的是一个函数,该函数将接收一个 dispatch 函数,而后由你来决定如何返回一个对象,这个对象经过 dispatch 函数与 action creator 以某种方式绑定在一块儿(提示:你也许会用到 Redux 的辅助函数 bindActionCreators()github

mergeProps(stateProps, dispatchProps, ownProps):若是指定了这个参数,mapStateToProps() 与 mapDispatchToProps() 的执行结果和组件自身的 props 将传入到这个回调函数中。该回调函数返回的对象将做为 props 传递到被包装的组件中。redux

options:api

若是指定这个参数,能够定制 connector 的行为。react-router

  • [pure true(Boolean): 若是为 true,connector 将执行 shouldComponentUpdate 而且浅对比 mergeProps 的结果,避免没必要要的更新,前提是当前组件是一个“纯”组件,它不依赖于任何的输入或 state 而只依赖于 props 和 Redux store 的 state。默认值为 true
  • [withRef false(Boolean): 若是为 true,connector 会保存一个对被包装组件实例的引用,该引用经过 getWrappedInstance() 方法得到。默认值为 false

options中pure属性默认为true,估计是由于浅对比的缘由,没有获取到路由的变化,所以能够将pure设置为falseapp

class Home extends Component {

}

function select(state) {
  return {
    logBox:state.logBox
  }
}

export default connect(select,undefined,undefined,{pure:false})(Home)

这样路由变化的时候,该组件就能监听而且从新render了。函数

相关文章
相关标签/搜索