Reaktor Router nie może uzyskać/zależnie od funkcji Onnternter

Question

Jestem nowy, aby React i mam nadzieję, że ktoś może rzucić trochę światła na to, dlaczego tak się dzieje i jak to debugować.

Mam następujące trasy zdefiniowane:

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 ma sprawdzić, czy użytkownik jest zalogowany i przekierować je do strony logowania, jeśli nie:

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

Gdybym opuścić transtion.to Zadzwoń i przejdź do głównego adresu URL Widzę komunikat "Nie mogę pobrać /" bez komunikatów o błędach w debugerze. Umieszczenie punktu przerwania w tej linii nie wydaje się nic.

Szczególnie dziwne jest to, że jeśli wymieniam transition.to(...) z instrukcją debugger;, to metoda zostanie wywołana, a routing działa doskonale.

Muszę mieć jakieś nieporozumienie, jakieś pomysły na to, co to jest?

Edycja: Powinienem dodać, że nawigacja do host:port/login działa dobrze, więc wiem, że działa trasa login.

Answer 1

Pochodząc z kątowego tła, błędnie założyłem, że routing odbywa się całkowicie po stronie klienta. Możliwe jest użycie routera reagowania dla routingu po stronie klienta po stronie klienta: i.

Zadzwoń pod numer zadzwonił po stronie klienta, ale wyrzucił wyjątek, gdy router po stronie serwera kopnął i zwrócił stronę Cannot GET /. Wyłapano wyjątek, ale nic nie zostało zarejestrowane.

dodałem if aby sprawdzić, czy my biegaliśmy na kliencie:

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

Nie ma chyba lepszego sposobu, aby obsłużyć to i gdybym się zorientować, że w końcu będę aktualizować moją odpowiedź.

Answer 2

Zgodnie z bieżącymi dokumentami, hak onEnter odbiera funkcję replace jako swój drugi parametr. np.

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

Czy używasz innej wersji routera reagowania? Próbowałem przeglądać dokumenty wersji alternatywnej dla haka onEnter, który zajmuje obiekt transition jako drugi parametr, ale nie miałem szczęścia w znalezieniu czegokolwiek.