Dave Dave - 1 year ago 310
React JSX Question

React-Router onChange hook

I am having issues getting the onChange hook in react-router to work 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} />

export default Routes;

My understanding is, that the function logUpdate will be triggered on each state change. However, it is only triggered when I reload the corresponding page via F5.

My menu is using simple Links e.g.:

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

What am I doing wrong?

Answer Source

onUpdate needs to be declared on the Router instance not Routes. Although, Routes can declare onChange and onEnter hooks - it's probably what you were looking for.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download