web-dev-qa-db-fra.com

Crochet React-Router onChange

J'ai des problèmes à faire fonctionner correctement le hook onChange de react-router. Voici mon fichier de routes:

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;

D'après ce que je comprends, la fonction logUpdate sera déclenchée à chaque changement d'état. Cependant, il ne se déclenche que lorsque je recharge la page correspondante via F5.

Mon menu utilise des liens simples, par exemple:

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

Qu'est-ce que je fais mal?

javascriptreactjsreact-router
11
Martial

onUpdate doit être déclaré sur l'instance Router et non pas Routes. Bien que Routes puisse déclarer onChange et onEnter hooks - c'est probablement ce que vous recherchiez.

6
Igorsvee

J'utilise react-router ^ 2.4.0 et onUpdate n'a pas fonctionné pour moi. J'ai plutôt utilisé onChange sur mon composant Route de base.

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>);
0
Geoff Simons