React-Router onChange 钩子 [英] React-Router onChange hook

问题描述

我在让 react-router 中的 onChange 钩子正常工作时遇到问题.这是我的路由文件:

从'react'导入React；从反应路由器"导入{路由器，路由，浏览器历史}；从 './Pages/testone' 导入 TestOne；从 './Pages/testtwo' 导入 TestTwo；函数日志更新(){console.log('当前网址:' + window.location.pathname);}常量路由 = (<路由器历史={browserHistory}>{/* 应用路由 */}<Route path="/" component={App} lang={lang}><Route path="/testone" component={TestOne} onUpdate={logUpdate}/><Route path="/testtwo" component={TestTwo} onUpdate={logUpdate}/></路线></路由器>);导出默认路由；

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

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

<Link to="/testone">测试一</Link><Link to="/testtwo">测试二</Link>

我做错了什么?

解决方案

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

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?

解决方案

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.

这篇关于React-Router onChange 钩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！