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获取必要的数据。

如何在React路由器中多次调用onEnter函数

1 个答案: