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