如何多次调用React Router中Route上的onEnter函数

Question

路由器2.0.我有这样的路线设置.

 <Route path='/' component={app}>
    <IndexRoute component={require('./dashboard')}  onEnter={logger.log} />
    <Route path='signup' component={require('./signup')}  onEnter={logger.log} />
    <Route path='login' component={require('./login')}  onEnter={logger.log} />
</Route>

正如您所看到的,我正在多次执行onEnter = {logger.log}这是还原剂.

我尝试在应用程序的根路由上放置onEnter处理程序,但它只调用该处理程序函数一次.当我从登录到注册导航时,它不会被调用.

有没有什么方法可以声明onEnter所有路由只调用一次logger.log,这样我就不必一次又一次地重复它.

Answer 1

您可以在根路由上使用OnChange挂钩

onChange(prevState, nextState, replace, callback?)

当位置改变时调用路线,但路线本身既不进入也不离开.例如,当路线的子项更改或位置查询更改时,将调用此方法.它提供先前的路由器状态,下一个路由器状态以及重定向到另一个路径的功能.this将是触发挂钩的路由实例.如果callback列为第4个参数,则此挂接将异步运行,并且转换将阻塞直到callback被调用.

像这样

 <Route path='/' component={app} onChange={logger.log} >
    <IndexRoute component={require('./dashboard')} />
    <Route path='signup' component={require('./signup')} />
    <Route path='login' component={require('./login')} />
</Route>

请注意,签名是不同的,因此您必须确保logger.log从nextState这种情况下获取必要的数据.