Redux connect包裹路由导致react-router-redux导航失效问题求助

我之前也碰到过一模一样的情况，核心原因是Redux的connect高阶组件默认会通过浅比较props/state来决定是否重新渲染组件，而路由变化带来的location、history等props并没有被connect的依赖检测覆盖，导致组件不会响应路由更新，看起来导航就失效了。

下面给你两个可行的解决方案，都能保留connect同时让导航正常工作：

方案1：用withRouter包裹connect后的组件 #

这是最通用的解决方式，react-router-dom提供的withRouter会把路由相关的props（history、location、match）注入到组件中，并且强制组件在路由变化时重新渲染。

修改你的./components/Routes.jsx：

// 先导入withRouter
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';

// ... 你的Routes组件代码

// 用withRouter包裹connect后的组件
export default withRouter(connect(() => ({}), () => ({}))(Routes));

方案2：在mapStateToProps中依赖路由状态（依赖react-router-redux） #

如果你已经通过react-router-redux把路由状态同步到了Redux store里，可以在mapStateToProps中返回location，让connect感知到路由变化：

const mapStateToProps = (state) => ({
  // 假设你的router reducer存在state.router下
  location: state.router.location
});

export default connect(mapStateToProps, () => ({}))(Routes);

这种方式的缺点是依赖Redux store中的路由状态，不如第一种方案通用。

为什么去掉connect就正常？ #

当你直接导出Routes时，它是被react-router直接渲染的，会自动接收路由相关的props，并且路由变化时react-router会触发组件重新渲染，所以导航功能正常。

内容的提问来源于stack exchange，提问作者Laurent De Cant