React router 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。 我在各种网站上看到了很多主题，但没有一个解决这个问题的方法。

- Peter

---

请参考这个答案，它可以帮助你解决问题。 - AmerllicA

一个针对React Router v4的Redux绑定库。 - vsync

Answer 1

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

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

我认为主要问题是withRouter和connect HOC的顺序。

问题在于Redux实现了shouldComponentUpdate，如果没有从路由接收到props，就没有任何变化的迹象。这很容易解决。找到连接组件的位置并用withRouter包装它。

来自官方文档。

更新

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

class Home extends React.Component {...}

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

- Ivan Burnaev

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;

Hope it is helpful for you ^^

- Voi Mập

---

我应该怎么升级到4.1.1版本？这个版本有任何语法变化吗？ - Peter

只需尝试输入命令 "npm update all"。我还没有使用过 :D。这里是链接 更新npm。 - Voi Mập

你能分享一下连接语法吗？问题就出在这里。请查看我更新的问题。 - Peter

这是我的索引^^ReactDOM.render(<BrowserRouter> <Provider store={store}> <App /> </Provider> </BrowserRouter>, document.getElementById('root'));registerServiceWorker(); - Voi Mập

withRouter 已经起作用了，非常感谢！我之前是在 Leftcomponent 中进行路由，但路由并没有生效。然而，我不得不在父组件被引入的地方进行操作。LeftComponent 在 app.js 中被使用，所以我必须在 app.js 中使用 withRouter 而不是在 LeftComponent js 文件中。 - Peter

好的：)) 恭喜你找到了 :P。你能给我一个投票吗：)) 我只有两个免费评论点数 :P。 - Voi Mập