import withRouter from ‘react-router-dom'
withRouter可以包装任何自定义组件,将react-router 的 history,location,match 三个对象传入。
如果使用了react-router-redux,则可以直接从state 中的router属性中获取location。不需要再使用withRouter 获取路由信息了
withRouter是专门用来处理数据更新问题的。在使用一些redux的的connect()
或者mobx的inject()
的组件中,如果依赖于路由的更新要重新渲染,会出现路由更新了但是组件没有重新渲染的情况。这是因为redux和mobx的这些连接方法会修改组件的shouldComponentUpdate
。
所以在使用withRouter解决更新问题的时候,一定要保证withRouter在最外层,比如withRouter(connect(Component))
inject用法
inject (mobx-react 包)相当于Provider 的高阶组件。可以用来从 React 的context中挑选 store 作为 prop 传递给目标组件。
用法:
- inject("store1", "store2")(observer(MyComponent))
- @inject("store1", "store2") @observer MyComponent
- @inject((stores, props, context) => props) @observer MyComponent
- @observer(["store1", "store2"]) MyComponent is a shorthand for
the the @inject() @observer combo.
网友评论