React-Router onChange hook

Question

I'm having problems with the onChange hook server working properly. Here is my routes file:

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; 

I understand that the logUpdate function will run every time a state changes. However, it only works when the corresponding page is reloaded through F5.

My menu uses simple links, for example:

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

What am I doing wrong?

Answer 1

onUpdate must be declared in an instance of Router not Route s. Although Route can declare onChange and onEnter - this is probably what you were looking for.

Answer 2

I am using response-router ^ 2.4.0, and onUpdate does not work for me. Instead, I used onChange on my base Route component.

 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>);