Come si aggiunge il reindirizzamento per reagire in modo dinamico al router?

Question

Ho un componente di accesso, che dovrebbe essere disponibile per gli utenti non autenticati. E subito dopo l'autenticazione questo componente dovrebbe diventare non disponibile.

var routes = (
     <Route handler={App}> 
     <Route name="signIn" handler={signIn}/> 
     {/* redirect, if user is already authenticated */} 
     { localStorage.userToken ? (
      <Redirect from="signIn" to="/user"/> 
     ) : null 
     } 
     </Route> 
    ); 

Router.run(routes, (Handler, state) => { 
    React.render(<Handler {...state}/>, document.getElementById('main')); 
}); 

Questo codice funziona perfettamente se l'utente ha ricaricato webapp per qualsiasi motivo, dopo l'autenticazione, ma naturalmente non se l'utente non ha ricaricare la webapp. Ho provato ad usare il componente SignUp this.context.router.transitionTo, ma funziona male - il componente viene sottoposto a rendering, quindi questo script viene eseguito.

Quindi voglio aggiungere il reindirizzamento a destra nella variabile rotte per rendere il router reindirizzato senza nemmeno provare a rendere il componente.

Answer 1

Invece di controllare il vostro auth-flow e condizionatamente il rendering percorsi particolari, mi sento di raccomandare un altro approccio:

Se stai usando reagire-router 0.13.x, mi consiglia di utilizzare il willTransitionTo methods sui componenti quando si bisogno di controllare l'autenticazione. Viene chiamato quando un gestore sta per eseguire il rendering, dandoti l'opportunità di interrompere o reindirizzare la transizione (in questo caso, controlla se l'utente è autenticato, reindirizza su un altro percorso se non lo è). Vedere l'esempio di auth-flow qui: https://github.com/ReactTraining/react-router/blob/v0.13.6/examples/auth-flow/app.js

Per le versioni> 0,13.x, sarebbe onEnter e Enterhooks. Vedere l'esempio di auth-flow qui: https://github.com/rackt/react-router/blob/master/examples/auth-flow/app.js

Fondamentalmente si sposta il flusso di controllo dell'autorizzazione dalla variabile routes e in eventi/hook di transizione. Prima che il gestore di route venga effettivamente visualizzato, controlla l'autenticazione e reindirizza l'utente su un'altra rotta.