Reagieren router v4 funktioniert nicht mit Redux

Entwicklung einer Anwendung Reagieren mit Reagieren v4 router. Alles funktionierte gut, bis ich eingeführt Redux in meiner app. Da dann auf klicken Sie links auf route ändern Sie die browser-url ändert, aber die Komponente entsprechend der route ist nicht immer geladen. Es funktioniert gut, wenn ich kommentieren Redux-code. Was könnte die Ursache sein? Hier ist mein code für 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 keine Fehlermeldung in der Konsole. Der code läuft sauber nur die Komponenten nicht geladen werden. Hier ist ein ähnlicher thread auf github: Vier tausend sechs hundert eins und siebzig. Ich habe gesehen, viele threads auf verschiedenen Seiten, aber keiner hat die Lösung für dieses Problem.

InformationsquelleAutor Vishal Gulati | 2017-07-12
  1. 53

    Hah, jetzt mache ich ein Projekt mit reagieren-router und redux auch =).

    Blick auf die offizielle Dokumentation über die redux-integration https://reacttraining.com/react-router/web/guides/redux-integration.

    Ich denke der wichtigste Punkt ist, um von withRouter und connect Hocs.

    Das problem ist, dass Redux implementiert shouldComponentUpdate und es gibt keine Anzeichen, dass sich irgendwas geändert hat, wenn es nicht empfängt Requisiten aus dem router. Dies ist einfach zu beheben. Finden Sie, wo Sie Ihre Komponente und wickeln Sie es in withRouter.

    Aus der offiziellen docs.

    UPD

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

class Home extends React.Component {...}

export default withRouter(
    connect(mapStateToPropsFunc)(Home)
);
    • connect verhindert re-render standardmäßig. Es shallow-equal Vergleich von Requisiten, das ist, warum Sie Ihre Routen nicht aktualisiert werden können.
    • welche änderungen sollte ich machen?
    • Tun Sie Routen verpackt connect? Wenn Sie das tun, dann sollten Sie wickeln Sie Sie von withRouter. Aktualisiert meine Antwort.
    • ja ich habe eine Verbindung.Ich habe versucht, den Umschlag in withRouter aber es hat nicht funktioniert.
    • Verwenden ConnectedRouter aus react-router-redux statt BrowserRouter. Ich denke, es sollte helfen.
    • aber reagieren v4-gor BrowserRouter und HashRouter, keine ConnectedRouter
    • Lassen Sie uns weiter, diese Diskussion im chat.
    • withRouter geklappt, vielen Dank! Ich war vorher tun, es Leftcomponent denen das routing nicht funktioniert. Aber ich musste es tun, wo der übergeordneten Komponente importiert wurde. LeftComponent wurde in app.js so in app.js ich musste withRouter in app.js und nicht in LeftComponent js.
    • Meinen Tag gerettet! Dank
    • genial Lösung buddy
    • Burnaev rettete mein Wochenende
    • Ich wickelte root-Komponente, die App (in meinem Fall) und es funktioniert Prima. Bevor ich wickelte jede route und scheiterte. Hervorragende Idee im Allgemeinen

    InformationsquelleAutor Ivan Burnaev
  2. 3

    Ich bin mit reagieren-router-dom-v4.1.1. Es ist für mich arbeiten. 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 ^^

    • was sollte ich tun, um ein upgrade auf 4.1.1? Alle syntax-änderungen in dieser version?
    • versuchen Sie einfach: "npm" alle aktualisieren". Ich habe nicht verwendet diese :D. Hier ist der Link Update npm
    • Könnte yuu teilen Sie Ihre connect-syntax bitte. Das ist, wo das Problem liegt. Bitte siehe meine Frage aktualisiert.
    • Hier ist mein index^^ ReactDOM.render(<BrowserRouter> <Provider store={store}> <App /> </Provider> </BrowserRouter>, document.getElementById('root')); registerServiceWorker();'
    • withRouter geklappt, vielen Dank! Ich war vorher tun, es Leftcomponent denen das routing nicht funktioniert. Aber ich musste es tun, wo der übergeordneten Komponente importiert wurde. LeftComponent wurde in app.js so in app.js ich musste withRouter in app.js und nicht in LeftComponent js.
    • okay :)). Herzlichen Glückwunsch zu erfahren :P. Kannst du mir eine Stimme :)). Ich habe nur 2 Punkte zum freien Kommentar 😛
    • Danke für die Abstimmung^^

    InformationsquelleAutor Voi Mập
Schreibe einen Kommentar