React Router kann nicht bekommen/abhängig von onEnter Funktion

Question

Ich bin neu in Reagieren und hoffen, dass jemand etwas Licht auf warum dies passiert und wie es debuggen kann.

Ich habe die folgenden Routen definiert:

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 soll überprüfen, ob der Benutzer angemeldet ist, und leiten sie an die Login-Seite, wenn nicht:

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

Wenn ich die verlassen transtion.to rufen Sie auf und navigieren Sie zur Stamm-URL Ich sehe nur eine Nachricht, die sagt, "Kann nicht erhalten /" ohne Fehlermeldungen im Debugger. Einen Haltepunkt auf dieser Linie zu setzen scheint nichts zu tun.

Was ist besonders seltsam ist, dass, wenn ich transition.to(...) durch eine debugger; Anweisung ersetzen, dann wird die Methode aufgerufen und Routing funktioniert einwandfrei.

Ich muss ein Missverständnis über etwas haben, irgendwelche Ideen, was das ist?

Edit: Ich sollte hinzufügen, dass die Navigation zu host:port/login funktioniert gut, so dass ich die login Route funktioniert.

Answer 1

Von einem eckigen Hintergrund kommend hatte ich fälschlicherweise angenommen, dass das Routing vollständig clientseitig erfolgte. Es ist möglich, react-router für das clientseitige und serverseitige Routing zu verwenden.

Der Anruf transition.to funktionierte auf der Client-Seite, aber warf eine Ausnahme, wenn Server-Side-Routing trat und die Cannot GET / Seite zurückgegeben. Die Ausnahme wurde gefangen, aber nichts protokolliert.

Ich habe eine if-Anweisung zu sehen, ob wir auf dem Client ausgeführt wurden:

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

Es gibt wohl einen besseren Weg, dies zu handhaben, und wenn ich das herauszufinden, schließlich werde ich meine Antwort aktualisieren.

Answer 2

Gemäß den aktuellen Dokumenten erhält der onEnter Hook eine replace Funktion als zweiten Parameter. d. h.

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

Verwenden Sie eine andere Version des React-Routers? Ich habe versucht, durch die alternative Version Docs für einen onEnter Haken, der ein transition Objekt als zweite Param, aber ich hatte nicht viel Glück bei der Suche nach etwas.