前言
- 有个小伙伴发问:为什么一个组件要用withRouter包裹?不是使用了connected-react-router把路由信息存到store了吗?
- 我仔细一想,觉得很有道理,其实确实可以不通过withRouter包裹获取history方法。
前置知识
正常写法
- connected-react-router提供一个
import { ConnectedRouter } from "connected-react-router";
组件,用来替换以前写法中做Router然后传history的写法。 - 正常的组件只要通过Route包裹或者withRouter即可拿到history提供的路由跳转等方法。
- 那么,现在问题就是,能不能不通过withRouter或者Route包裹也可以获取改变路由的方法?
不通过withRouter或者Route包裹获取改变路由的方法
- 我一开始也没注意这个问题,毕竟正常写也能获取到,直到这个小伙伴发问,我才觉得按理说不通过withRouter和Route也是可以获得改变路由的方法的。毕竟connected-react-router把路由信息存放到了store中,而其改变store中路由信息,必然要dispatchAction,那么如果store中路由信息改变,真实路由没改变,那肯定会有问题,所以dispatch必然借助了history的方法制作而成,而我们只要拿到dispatch方法即可改变路由。
- 以回退为例,事实上connectRouter可以导出goBack使用:
import { goBack } from "connected-react-router";
- 这个goBack其实相当于我们写的dispatchAction。
- 可以通过对组件进行connect连接store:
export default connect((state) => state, { goBack })(Components);
- 将goBack作为对象映射到组件属性上,通过props.goBack派发action改变store:
<button onClick={() => props.goBack()}>+++</button>
- 这样页面也可以生效。
- 当然我们可以不连接store,毕竟所有conncet组件会进行更新操作,这样非常影响性能,还记得store可以进行dispatch操作吧,导出store,利用store进行派发即可:
<button onClick={() => Store.dispatch(goBack())}>+++</button>
- 这种直接派发思路其实挺好,对于如果派发一个action并不会使得此组件更新状态就很有帮助,因为组件没有conncect store,不会使得store数据变化造成props变化而刷新组件。(我已测试确实不会刷新)。