本文共 1348 字，大约阅读时间需要 4 分钟。

前言

• 有个小伙伴发问：为什么一个组件要用withRouter包裹？不是使用了connected-react-router把路由信息存到store了吗？
• 我仔细一想，觉得很有道理，其实确实可以不通过withRouter包裹获取history方法。

前置知识

• 我们知道，withRouter其实相当于<Route component={xxxx}/>，而最上层是被Router包裹的，为此有基于Router制作的各种增强版Router。connected-react-router就是其中之一，它可以把路由信息以及方法存在store中，同时又不影响正常的路由数据和形式。
• 想了解Router Route BrowserRouter等等到底怎么工作的可以看我写的这篇：

正常写法

• 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：

 props.goBack()}>+++

• 这样页面也可以生效。
• 当然我们可以不连接store，毕竟所有conncet组件会进行更新操作，这样非常影响性能，还记得store可以进行dispatch操作吧，导出store，利用store进行派发即可：

 Store.dispatch(goBack())}>+++

• 这种直接派发思路其实挺好，对于如果派发一个action并不会使得此组件更新状态就很有帮助，因为组件没有conncect store，不会使得store数据变化造成props变化而刷新组件。（我已测试确实不会刷新）。

转载地址：https://blog.csdn.net/yehuozhili/article/details/106879551 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！