verhindern reagieren-Router von Änderungserfassungs Lage

Question

In meinem Reagieren/Redux-basierte Anwendung, habe ich realisiert Abmelde wie

folgenden

In reducers/index.js wo ich combineReducers, ich habe eine App Ebene Minderer appReducer genannt erstellt. Dort suche ich nach LOGOUT Aktion und dann zurück undefined.

All dies funktioniert gut. Was ich tun möchte ist, dass für LOGOUT Aktion, ich möchte auch localStorage löschen und Redirect Login-Seite. Bitte beachten Sie, dass ich den nativen Browser so umleiten möchte, dass kein react-router verwendet wird. Wenn ich window.location = '/' mache. Zuerst wird es von react-router erkannt und ich sehe Login-Seite für ein bisschen und dann aktualisiert es, was ein bisschen seltsam ist.

Gibt es eine Möglichkeit zu verhindern, dass der react-Router bei einer Standortänderung benachrichtigt wird?

Answer 1

Sie können es nicht vollständig verhindern, aber Sie können es mit dem Zugriff auf history.listen Funktion steuern.

Mit React-Router 4 können Sie Top-Level-Komponenten mit dem HOC withRouter umhüllen.

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App)); 

Dies ermöglicht den Zugriff auf this.props.history und es

class App extends Component { 
    constructor(props) { 
    super(props); 

    this.props.history.listen((location, action) => { 
     //here you can control the location change 
    }); 
    } 

    render() { 
    return (
     </div> 
    ); 
    } 
} 

Steuerung Und Sie haben auch die listenBefore Ereignis über die Geschichte Objekt und Sie können dieses Ereignis verwenden, um die Navigation zu steuern und fügen Ihre eigene benutzerdefinierte Navigationslogik:

history.listenBefore((location, done) => doSomething(location).then(done))