2016-09-06 18 views
8

Mam problemy z uzyskaniem haka onChange w routerze reagowania, aby działał poprawnie. Oto mój plik tras:React-Router onChange hook

import React from 'react'; 
import { Router, Route, browserHistory } from 'react-router'; 
import TestOne from './Pages/testone'; 
import TestTwo from './Pages/testtwo'; 

function logUpdate() { 
    console.log('Current URL: ' + window.location.pathname); 
} 

const Routes = (
    <Router history={browserHistory}> 
     {/* App Routes */} 
     <Route path="/" component={App} lang={lang}> 
      <Route path="/testone" component={TestOne} onUpdate={logUpdate} /> 
      <Route path="/testtwo" component={TestTwo} onUpdate={logUpdate} /> 
     </Route> 
    </Router>); 

export default Routes; 

Rozumiem, że funkcja logUpdate zostanie uruchomiona przy każdej zmianie stanu. Jednak jest on wyzwalany tylko po ponownym załadowaniu odpowiedniej strony przez F5.

Moje menu jest za pomocą prostych Links np .:

<div> 
<Link to="/testone">Test One</Link> 
<Link to="/testtwo">Test Two</Link> 
</div> 

Co robię źle?

Odpowiedz

5

onUpdate należy zgłosić w instancji Router, a nie Route s. Chociaż Route s może zadeklarować haki onChange i onEnter - prawdopodobnie tego właśnie szukałeś.

+0

Świetnie, nie mogę uwierzyć, że to przegapiłem! Dzięki Igorsvee – Dave

+0

Te linki są dla wersji 2.X, teraz reagują-router na 4.0 :) –

0

Używam routera reakcji^2.4.0 i funkcja onUpdate nie działa dla mnie. Zamiast tego użyłem opcji Zmień na moim podstawowym komponencie Trasa.

const Routes = (
    <Router history={browserHistory}> 
     {/* App Routes */} 
     <Route path="/" component={App} lang={lang} onChange={logUpdate}> 
      <Route path="/testone" component={TestOne} /> 
      <Route path="/testtwo" component={TestTwo} /> 
     </Route> 
    </Router>);