使用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。我在各种站点上看到了很多线程,但是没有一个线程可以解决此问题。
嗯,现在我也在用react-router和redux进行项目=)。
查看有关redux集成的官方文档https://reacttraining.com/react-router/web/guides/redux- integration。
我认为要点是withRouter和connectHocs的顺序。
withRouter
connect
问题是Redux实现了shouldComponentUpdate,如果没有从路由器接收道具,则没有任何迹象表明发生了任何变化。这很容易解决。查找连接组件的位置,然后将其包装在Router中。
来自官方文档。
UPD
import { withRouter } from 'react-router-dom'; import { connect } from 'react-redux'; class Home extends React.Component {...} export default withRouter( connect(mapStateToPropsFunc)(Home) );