React-router: impedisce la navigazione verso il percorso di destinazione

Question

Sto utilizzando react-router con cronologia useQueries(createHashHistory)() e ho diversi percorsi che voglio impedire alla navigazione in base alla configurazione del percorso.
Così percorsi di configurazione è simile:

<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> 

Quindi supponiamo che io sono su #/view-2 e chiamare un'azione come history.push({pathname: '/view-1'});. Ma non appena il percorso view-1 ha una bandiera canNavigate={false} - Voglio impedire la navigazione ad esso e mostrare un messaggio senza cambiare un hash e altri eventuali effetti secondari (come chiamare onLeave gancio di view-2).

Stavo pensando di ascoltare history:

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

ma non riesco a ottenere l'istanza percorso per verificare canNavigate bandiera.
Più tardi ho scoperto che history ha un metodo match che in realtà ottiene stato successivo router sulla base del dato location:

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

ma il problema è che le chiamate history.matchonLeave gancio per view-2 all'interno (che può, per esempio, lo stato di cancellazione anche se l'utente rimane nella vista view-2).

La domanda: è possibile impedire la navigazione da view-2 senza alcuna modifica nella cronologia/router e prendere questa decisione in base alla configurazione del percorso di destinazione?

Answer 1

React non può impedire la navigazione dopo aver chiamato history.push.

Dovresti incapsulare il servizio di cronologia con uno personalizzato che controllerà se è possibile navigare e se è quindi chiama history.push. altrimenti impedire la navigazione e mantenere lo stato.