React-Router onChange hook

React-Router onChange hook

本文关键字：hook onChange React-Router      更新时间：2023-09-26

我在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;

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

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

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

我做错了什么?

需要在Router实例上声明onUpdate而不是Route s。虽然，Route s可以声明onChange和onEnter钩子-这可能是你正在寻找的。

我正在使用react-router ^2.4.0和onUpdate不适合我。我在我的基本路由组件上使用了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>);
相关文章：