reactjs - 如何在 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 处理程序放在应用程序的根路由上，但它只调用了该处理程序函数一次。当我从登录导航到注册时，不会为 ex 调用它。

有什么方法可以让我声明所有路由的 onEnter 只调用 logger.log 一次，这样我就不必一次又一次地重复同样的事情。

Answer 1

您可以使用 OnChange钩在根 Route 上

onChange(prevState, nextState, replace, callback?)

当位置发生变化时在路线上调用，但路线本身既不进入也不离开。例如，这将在路线的子项更改或位置查询更改时调用。它提供前一个路由器状态、下一个路由器状态，以及重定向到另一条路径的功能。 this 将是触发 Hook 的路由实例。如果 callback 被列为第四个参数，则此 Hook 将异步运行，并且转换将阻塞直到 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 获取必要的数据。