21

使用 React 路由器 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。我在各个站点上看到了很多线程，但没有一个可以解决这个问题。

4

2 回答 2

57

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

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

我认为重点是顺序withRouter和connectHocs。

问题是 Redux 实现了 shouldComponentUpdate 并且如果它没有从路由器接收道具，则没有任何迹象表明任何事情发生了变化。这很容易解决。找到连接组件的位置并将其包装在 withRouter 中。

来自官方文档。

UPD

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

class Home extends React.Component {...}

export default withRouter(
    connect(mapStateToPropsFunc)(Home)
);
于 2017-07-12T11:20:36.247 回答
3

我正在使用 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;

希望对你有帮助^^

于 2017-07-12T11:22:58.783 回答