React 路由器 v4 不适用于 Redux

Question

使用 React router v4 开发 React 应用程序。在我在我的应用程序中引入 Redux 之前，一切都运行良好。从那时起，单击链接以更改路由时，浏览器 url 发生变化，但未加载与路由对应的组件。如果我注释掉 Redux 代码，效果会很好。是什么原因造成的？这是我的路由代码：

import React, { Component } from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import LeftSubDefault from './../components/left-sub-default.component';
import LeftSubOne from './../components/left-sub-one.component';
import LeftSubTwo from './../components/left-sub-two.component';
import { withRouter } from 'react-router-dom';
import { connect } from "react-redux";
import { goToLeftDefault, goToLeftOne, goToLeftTwo } from "./../actions/leftRouteActions.js";

class LeftComponent extends Component {
  render() {
    return (
      <div className="col-xs-6">
          <p>
            Current sub route: {this.props.currentRoute}
          </p>
          <ul>
            <li onClick={this.props.goToDefault}><Link to={'/'}>Go To Default</Link></li>
            <li onClick={this.props.goToSub1}><Link to={'/left-sub1'}>Go To One</Link></li>
            <li onClick={this.props.goToSub2}><Link to={'/left-sub2'}>Go To Two</Link></li>
          </ul>
          <Switch>
            <Route exact path='/' component={LeftSubDefault} />
            <Route exact path='/left-sub1' component={LeftSubOne} />
            <Route exact path='/left-sub2' component={LeftSubTwo} />
          </Switch>
      </div>
    );
  }
}
const mapStateToProps = (store) => {
  return {
    currentRoute: store.routes.currentRoute
  };
}
const mapDispatchToProps = (dispatch) => {
  return {
    goToDefault: () => {
      dispatch(goToLeftDefault())
    },
    goToSub1: () => {
      dispatch(goToLeftOne())
    },
    goToSub2: () => {
      dispatch(goToLeftTwo())
    }
  };
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(LeftComponent));

PS：我在控制台中没有收到任何错误。代码运行干净只是组件不加载。 github 上有一个类似的帖子：4671。我在各种网站上看到了很多帖子，但是 none 有解决这个问题的方法。

Answer 1

哈，现在我也在用 react-router 和 redux 做一个项目 =)。

查看官方关于redux集成的文档https://reacttraining.com/react-router/web/guides/redux-integration。

我认为重点是 withRouter 和 connect Hocs 的顺序。

The problem is that Redux implements shouldComponentUpdate and there’s no indication that anything has changed if it isn’t receiving props from the router. This is straightforward to fix. Find where you connect your component and wrap it in withRouter.

来自官方文档

UPD

import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';

class Home extends React.Component {...}

export default withRouter(
    connect(mapStateToPropsFunc)(Home)
);

Answer 2

我正在使用 react-router-dom v4.1.1。它对我有用。这是我的演示

import React from 'react';

import Reducer1 from 'yourReducer1';
import Reducer2 from 'yourReducer2';


import {
    Route,
    Switch as RouterSwitch
} from 'react-router-dom';

const App =()=> (
<RouterSwitch>
    <Route path="/link1" exact component={Reducer1}/>
    <Route path="/link2" exact component={Reducer2}/>     
</RouterSwitch>
);

export default App;

希望对你有所帮助^^

React 路由器 v4 不适用于 Redux

React router v4 not working with Redux

reactjs

react-router-component

redux

react-redux

react-router-v4