Push-Geschichte auf Aktionen reagieren-Router v4 nicht navigieren nicht

Question

mit Redirect Brauchen Sie Hilfe bei action.js

import axios from "axios"; 
import createHistory from 'history/createBrowserHistory'; 
import {Notification} from "modules/shared/components"; 
import * as types from "./actionTypes"; 
import {API_URL} from "utils/constants"; 

const history = createHistory(); 
export function signUp({name, email, password}) { 
    return (dispatch) => { 
     dispatch({type: types.AUTH_REQUEST}); 

     axios.post(`${API_URL}/auth/register`, {name, email, password}) 
      .then(response => { 
       history.push('/'); 
      }) 
      .catch(error => { 
       const {title, message} = error; 
       dispatch(Notification('error', title, message)); 
       dispatch({type: types.AUTH_ERROR, payload: error}); 
      }) 
    } 
} 

In Vergangenheit ich browserHistory.push('/') verwenden können, und es wird mir zu / umleiten. Nach der Verwendung von React Router v4 ist die browserHistory-Funktion weg. Und ich ändere sie mit createHistory. Ja, es funktioniert, aber es ändert nur meine URL, um mich nie auf die URL umzuleiten.

Irgendeine Lösung?

Answer 1

In Reaktion Router v3, browserHistory war ein Singleton und Sie können es überall verwenden, um zu einer bestimmten Route zu navigieren. Aber in v4 wird dies nicht funktionieren, da <BrowserRouter> seine eigene Verlaufsinstanz erstellt. Daher sollten Sie Ihre Route immer in einer Komponente ändern, in der Sie Zugriff auf die Instanz history des Routers haben.

Hier ist der Ansatz, den ich in dieser Art von Szenarien verwende. Anstatt zu versuchen, in Ihrem Aktionsersteller zu navigieren, können Sie die Aktion AUTH_SUCCESS im Erfolgsrecall mit der Antwort als Aktionslast senden. Dann machen Sie Ihren Reduzierer, um den Zustand basierend auf dieser Aktion zu ändern. Nehmen wir als Beispiel an, dass Ihr Reduzierer das Attribut user in Ihrem Status wie folgt ändert.

case types.AUTH_SUCCESS: 
     return Object.assign({}, state, { 
     user: action.user, 
     }); 

Auch Ihre SignUp Komponente (oder was auch immer die Komponente, die Sie signUp Methode aufrufen) sollten als Stütze zu user Attribut in dem Zustand verbunden sind. Wenn Sie redux und react-redux verwenden, könnte etwas wie folgt aussehen. Jetzt

function mapStateToProps(state) { 
    return { 
    user: state.user 
    }; 
} 

export default connect(mapStateToProps)(SignUp); 

wenn die user Änderung als Ergebnis der signUp Methode, SignUp Komponente wird die user als neue Stütze erhalten. Sie können also die Methode componentWillReceiveProps der Komponente verwenden, um Ihre Route zu ändern, wenn die Property user definiert ist.

componentWillReceiveProps(newProps){ 
if(newProps.user){ 
    this.props.history.push('/') 
} 
} 

des Routers history Instanz als Stütze zu erhalten, entweder SignUp Komponente mit Route oder umhüllt mit withRouter

Oder als Alternative können Sie neue <Redirect/> Komponente in Ihrem Render-Methode verwenden, wie folgt wiedergegeben werden sollte .

render(){ 
    return this.props.user ? (<Redirect to="/" />) : (...your current JSX code for SignUp component); 
}