React-Router: verhindern Navigation zur Zielroute

Question

Ich benutze React-Router mit Geschichte useQueries(createHashHistory)() und ich habe mehrere Routen, die ich basierend auf der Route der Konfiguration Navigation verhindern wollen.
So Routen Config ist wie:

<Route path="/" name={RouteNames.APP} component={AppContainer}> 
    <Route path="view-1" 
     onEnter={ view1onEnter } 
     onLeave={ view1onLeave } 
     component={ View1 } 
     canNavigate={ false } 
    /> 
    <Route path="view-2" 
     onEnter={ view2onEnter } 
     onLeave={ view2onLeave } 
     component={ View2 } 
     canNavigate={ true } 
    /> 
    ... 
</Route> 

also lasst uns annehmen, ich bin #/view-2 und eine Aktion wie history.push({pathname: '/view-1'}); nennen. Aber sobald Route view-1 hat eine Flagge canNavigate={false} - Ich möchte Navigation zu ihr zu verhindern und eine Nachricht ohne Änderung eines Hash und andere Nebenwirkungen (wie Aufruf onLeave Hook von view-2) anzuzeigen.

ich hören history dachte:

history.listenBefore((location, callback) => { 
    //e.g. callback(false) to prevent navigation 
}) 

aber ich kann die Route Instanz nicht bekommen canNavigate Flagge zu überprüfen.
Später habe ich herausgefunden, dass history eine Methode hat match die tatsächlich nächsten Router Zustand basierend auf dem location gegeben wird:

history.listenBefore((location, callback) => { 
    history.match(location, (error, redirectLocation, nextState) => { 
     const route = _.last(nextState.routes); 
     if (route.canNavigate) { 
      callback(); 
     } else { 
      callback(false); 
     } 
    }); 
}) 

aber das Problem ist, dass history.match Anrufe onLeave Haken für view-2 innen (das kann für Beispiel, löschen Sie den Status, obwohl der Benutzer auf der view-2 Ansicht bleibt).

Die Frage: Ist es möglich, die Navigation von view-2 ohne irgendwelche Änderungen in der Geschichte/Router zu verhindern und diese Entscheidung auf der Grundlage der Zielroutenkonfiguration zu treffen?

Answer 1

React kann die Navigation nicht verhindern, nachdem Sie history.push aufgerufen haben.

Sie sollten den Verlaufsdienst mit einem benutzerdefinierten verkapseln, der prüft, ob es möglich ist, zu navigieren, und ob es sich dann um Anrufprotokoll.push handelt. Andernfalls verhindern Sie die Navigation und behalten Sie den Status.