web-dev-qa-db-fra.com

React le routeur v4 ne fonctionne pas avec Redux

Développer une application React en utilisant React router v4. Tout a bien fonctionné jusqu'à ce que j'introduise Redux dans mon application. Depuis lors, sur clic de liens pour changer de route, l'url du navigateur change mais le composant correspondant à la route ne se charge pas. Cela fonctionne bien si je commente le code Redux. Quelle pourrait être la cause? Voici mon code de routage:

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: je ne reçois aucune erreur dans la console. Le code s'exécute correctement, seuls les composants ne se chargent pas. Voici un fil similaire sur github: 4671 . J'ai vu beaucoup de discussions sur divers sites mais aucun n'a la solution à ce problème.

reactjsreduxreact-reduxreact-router-v4react-router-component
19
Vishal Gulati

Hah, maintenant je fais un projet avec react-router et redux aussi =).

Regardez la documentation officielle sur l'intégration de redux https://reacttraining.com/react-router/web/guides/redux-integration .

Je pense que le point principal est l'ordre de withRouter et connect Hocs.

Le problème est que Redux implémente shouldComponentUpdate et rien n'indique que quelque chose a changé s'il ne reçoit pas d'accessoires du routeur. C'est simple à corriger. Trouvez où vous connectez votre composant et enveloppez-le avec Routeur.

Des documents officiels.

UPD

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

class Home extends React.Component {...}

export default withRouter(
    connect(mapStateToPropsFunc)(Home)
);
53
Ivan Burnaev

J'utilise react-router-dom v4.1.1. Ça marche pour moi. Voici ma démo

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;

J'espère que cela vous sera utile ^^

3
Voi Mập