React router v4 不适用于 Redux [英] React router v4 not working with Redux

问题描述

使用 React router v4 开发 React 应用程序.一切都很好，直到我在我的应用程序中引入了 Redux.从那时起，单击链接以更改路由，浏览器 url 会更改，但未加载与该路由对应的组件.如果我注释掉 Redux 代码，效果会很好.什么可能导致这种情况?这是我的路由代码:

import React, { Component } from 'react';从'react-router-dom'导入{交换机，路由，链接}；从'./../components/left-sub-default.component'导入LeftSubDefault；从'./../components/left-sub-one.component'导入LeftSubOne；从'./../components/left-sub-two.component'导入LeftSubTwo；从'react-router-dom'导入{ withRouter };从react-redux"导入{连接}；import { goToLeftDefault, goToLeftOne, goToLeftTwo } from "./../actions/leftRouteActions.js";类 LeftComponent 扩展组件 {使成为() {返回 (<div className="col-xs-6"><p>当前子路由:{this.props.currentRoute}</p><ul><li onClick={this.props.goToDefault}><Link to={'/'}>转到默认值</Link></li><li onClick={this.props.goToSub1}><Link to={'/left-sub1'}>转到一个</Link></li><li onClick={this.props.goToSub2}><Link to={'/left-sub2'}>转到两个</Link></li><开关><路由精确路径='/' component={LeftSubDefault}/><路由精确路径='/left-sub1' component={LeftSubOne}/><路由精确路径='/left-sub2' component={LeftSubTwo}/></开关>

);}}const mapStateToProps = (store) =>{返回 {currentRoute: store.routes.currentRoute};}const mapDispatchToProps = (调度) =>{返回 {goToDefault: () =>{调度(goToLeftDefault())},goToSub1: () =>{调度(goToLeftOne())},goToSub2: () =>{调度(goToLeftTwo())}};}导出默认 withRouter(connect(mapStateToProps, mapDispatchToProps)(LeftComponent));

PS:我在控制台中没有错误.代码运行干净，只是组件不加载.这是 github 上的一个类似线程:4671.我在各种网站上看到过很多帖子，但没有一个能解决这个问题.

解决方案

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

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

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

<块引用>

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

来自官方文档.

更新

import { withRouter } from 'react-router-dom';从'react-redux'导入{连接}；class Home 扩展 React.Component {...}导出默认 withRouter(连接(mapStateToPropsFunc)(主页));

Developing a React application using React router v4. All worked well until I introduced Redux in my app. Since then on click of links to change route the browser url changes but the component corresponding to the route is not getting loaded. It works well if I comment out Redux code. What could be causing this? Here is my code for routing:

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: I get no error in console. The code runs clean just components don't load. Here is a similar thread on github: 4671. I have seen lot of threads on various sites but none has the solution for this issue.

解决方案

Hah, now I'm making a project with react-router and redux too =).

Look at the official documentation about redux integration https://reacttraining.com/react-router/web/guides/redux-integration.

I think the main point is order of withRouter and 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.

From the official docs.

UPD

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

class Home extends React.Component {...}

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

这篇关于React router v4 不适用于 Redux的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！