React-Router onChange 钩子答案

【问题标题】：React-Router onChange hookReact-Router onChange 钩子
【发布时间】：2017-01-14 01:30:30
【问题描述】：

我在让 react-router 中的 onChange 挂钩正常工作时遇到问题。这是我的路线文件：

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;

我的理解是，函数 logUpdate 将在每次状态更改时触发。但是，它只有在我通过 F5 重新加载相应页面时才会触发。

我的菜单使用简单的链接，例如：

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

我做错了什么？

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

onUpdate 需要在Router 实例而不是Routes 上声明。虽然，Routes 可以声明 onChange 和 onEnter 挂钩 - 这可能就是您要找的。p>

【讨论】：

太好了，真不敢相信我错过了！谢谢伊戈斯维
这些链接适用于 2.X 版，现在是 4.0 版的 react-router :)
第 4 版 onUpdate 已从路由器组件中删除。看到这个问题 - stackoverflow.com/questions/41911309/…

【解决方案2】：

我正在使用 react-router ^2.4.0 并且 onUpdate 对我不起作用。我在我的基本 Route 组件上使用了 onChange。

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

【讨论】：