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

【问题标题】：How to call onEnter function on Route in React Router Multiple times如何在 React Router 中的 Route 上多次调用 onEnter 函数
【发布时间】：2016-07-22 04:00:52
【问题描述】：

路由器 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，这样我就不必一次又一次地重复。

【问题讨论】：

标签： reactjs react-router

【解决方案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 获取必要的数据。

【讨论】：