React-Router onChange hook

Question

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} />
        </Route>
    </Router>);

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.:

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

What am I doing wrong?

score 5 · Accepted Answer · edited Jul 13 '17 at 01:21

5

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.

edited Jul 13 '17 at 01:21

Aziz Ali

5
2

answered Sep 06 '16 at 14:47

Igorsvee

3,335
1
22
20

Great, can't believe I've missed that! Thanks Igorsvee – Martial Sep 06 '16 at 16:55
1

These links are for version 2.X, now react-router on 4.0 :) – Marwen Trabelsi Oct 31 '17 at 20:20
on version 4 onUpdate was removed from Router component. See this question - https://stackoverflow.com/questions/41911309/how-to-listen-to-route-changes-in-react-router-v4 – Gyro Oct 04 '18 at 08:32

score 0 · Answer 2 · answered Apr 26 '17 at 18:46

I'm using react-router ^2.4.0 and onUpdate did not work for me. I have instead 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>);

React-Router onChange hook

2 Answers2

Linked