web-dev-qa-db-de.com

React Router v4 funktioniert nicht mit Redux

Entwickeln einer React Anwendung mit React Router v4. Alles hat gut funktioniert, bis ich Redux in meiner App eingeführt habe. Seitdem klicken Sie auf Links, um die Route der Browser-URL zu ändern ändert sich, aber die Komponente, die der Route entspricht, wird nicht geladen. Es funktioniert gut, wenn ich den Redux-Code auskommentiere. Woran kann das liegen? Hier ist mein Code für das 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: Ich bekomme keinen Fehler in der Konsole. Der Code wird sauber ausgeführt, nur Komponenten werden nicht geladen. Hier ist ein ähnlicher Thread zu Github: 4671 . Ich habe viele Threads auf verschiedenen Websites gesehen, aber keiner hat die Lösung für dieses Problem.

19
Vishal Gulati

Hah, jetzt mache ich auch ein Projekt mit React-Router und Redux =).

Lesen Sie die offizielle Dokumentation zur Redux-Integration https://reacttraining.com/react-router/web/guides/redux-integration .

Ich denke, der Hauptpunkt ist die Reihenfolge von withRouter und connect Hocs.

Das Problem ist, dass Redux shouldComponentUpdate implementiert und es keinen Hinweis darauf gibt, dass sich etwas geändert hat, wenn keine Requisiten vom Router empfangen werden. Dies ist einfach zu beheben. Finden Sie, wo Sie Ihre Komponente anschließen, und wickeln Sie sie in Router ein.

Aus den offiziellen Dokumenten.

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

Ich verwende React-Router-Dom v4.1.1. Es funktioniert für mich. Hier ist meine Demo

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;

Hoffe es ist hilfreich für dich ^^

3
Voi Mập