2016-02-08 18 views
7

Sono nuovo di reagire e sperando che qualcuno possa far luce sul perché questo sta accadendo e come eseguire il debug di esso.Reagire Router Can not Get/a seconda della funzione onEnter

ho i seguenti itinerari definiti:

export default (withHistory, onUpdate) => { 
    const history = withHistory? 
       (Modernizr.history ? 
       new BrowserHistory 
       : new HashHistory) 
      : null; 
    return (
    <Router history={history}> 
     <Route path='/login' component={Login} /> 
     <Route path='/' component={Home} onEnter={requireAuth} /> 
    </Router> 
); 
}; 

requireAuth si suppone per controllare se l'utente è connesso e li reindirizza alla pagina di login, se non:

function requireAuth(nextState, transition) { 
    transition.to("/login"); 
} 

Se lascio il transtion.to chiama e naviga fino all'URL di root. Vedo semplicemente un messaggio che dice "Impossibile ottenere /" senza messaggi di errore nel debugger. Mettere un punto di interruzione su quella linea non sembra fare nulla.

Ciò che è particolarmente strano è che se sostituisco transition.to(...) con un'istruzione debugger;, il metodo viene chiamato e il routing funziona perfettamente.

devo avere un malinteso su qualcosa, tutte le idee su cosa si tratta?

Modifica: Devo aggiungere che la navigazione su host:port/login funziona correttamente, quindi so che il percorso login funziona.

+1

Quale versione di react-router? 1.x? – walkerrandophsmith

+0

Sto usando la versione 1.0.0-beta3 del react-router. Ho provato ad aggiornare la versione che stavo usando, ma ho finito per risolverlo in un modo più semplice. – shieldstroy

risposta

2

Venendo da uno sfondo angolare avevo erroneamente per scontato che il routing stava accadendo tutto sul lato client. È possibile utilizzare react-router sia per il lato client e di routing lato server.

La chiamata transition.to ha funzionato correttamente sul lato client, ma ha generato un'eccezione quando il routing sul lato server è stato avviato e ha restituito la pagina Cannot GET /. L'eccezione veniva catturata ma non veniva registrato nulla.

ho aggiunto un'istruzione if per vedere se eravamo in esecuzione sul client:

if(window.location) { 
    if(!loggedIn) { 
     transition.to("/login"); 
    } 
} 

C'è probabilmente un modo migliore per gestire questa situazione e se immagino che fuori alla fine io aggiornare la mia risposta.

0

In base ai documenti correnti, il gancio onEnter riceve una funzione replace come secondo parametro. Ad esempio

type EnterHook = (nextState: RouterState, replace: RedirectFunction, callback?: Function) => any; 

Si sta utilizzando una versione diversa del router di reazione? Ho provato a cercare tra i documenti della versione alternativa per un hook onEnter che accetta un oggetto transition come secondo param, ma non ho avuto molta fortuna nel trovare qualcosa.

+0

Sto usando la versione 1.0.0-beta3 del react-router, che passa l'oggetto Transition e non la funzione replace. Ho provato ad aggiornare la versione che stavo usando, ma ho finito per risolverlo in un modo più semplice. – shieldstroy