Wie navigiere ich außerhalb von Komponenten in ReactRouter 4?

Question

In React Router (v3) kann ich eine Serverantwort akzeptieren und browserHistory.push verwenden, um zur entsprechenden Antwortseite zu gelangen. Dies ist jedoch in v4 nicht verfügbar, und ich bin nicht sicher, was der geeignete Weg ist, dies in React-Router V4 zu behandeln.

Im folgenden Beispiel, wenn der Server einen Erfolg zurückgibt, wird der Benutzer auf die Wagenseite

// Aktionen/index.js

export function addProduct(props) { 
    return dispatch => 
    axios.post(`${ROOT_URL}/cart`, props, config) 
     .then(response => { 
     dispatch({ type: types.AUTH_USER }); 
     localStorage.setItem('token', response.data.token); 
     browserHistory.push('/cart'); // no longer in React Router V4 
     }); 
} 

genommen Wie kann ich eine Umleitung auf die Seite machen aus Funktion in React Router v4?

Ich kann viele Verweise auf die Navigation von Komponenten in meinem Fall finde ich aus einer Funktion navigieren müssen

Answer 1

Reagieren Router 4 eine deklarative Ansatz dazu hat und stattdessen unbedingt eine Funktion aufrufen om die Umleitung zu tun, Sie machen eine <Redirect/> Komponente, see docs here

So in den verantwortlichen Komponenten machen Methode möchten Sie wahrscheinlich bedingt <Redirect to='/cart'/> machen abhängig von einigen von dieser Aktion

Answer 2

geändert prop Wenn Sie Programm-Router irgendwo möchten, verwenden Sie Geschichte ist die beste Lösung, Them Problem hier ist, wie das Geschichte Objekt in der Komponente zu erhalten:

• Strecke: Render-Komponente mit Strecke

• WithRouter: wickeln Komponente:

  Klasse IhreKomponente erweitert Komponente {}

  withRouter() (yourcomponent)

Wenn Sie diese Redux in wollen tun, dann könnte man mit versuchen React-Router-Redux