Multiple onEnter/onLeave Hooks on <Route>

Summary

I think it might be very helpful to allow users to pass either a single function (as they currently can) or an array of functions (proposed new feature) to the onEnter and onLeave props of Route components. I think this could allow developers to create much more powerful and flexible actions on route transitions.

Example Use Case

This is something that has come up in the app I’m working on now. As the router is currently configured, every leaf route has a single onEnter hook that dispatches actions to fetch all data dependencies from the server and then records page views for Google Analytics. This works pretty well right now because every leaf route does both of those things, so we only need one hook. However, we’re starting to run into cases where some routes have more highly customized needs, particularly with analytics.

I’ll explain one such case in more detail. Certain routes may have referrer tokens in the query string that we would like to capture and send to Google Analytics. Unfortunately, we can’t just rely on the normal referral URL that GA automatically sends on initialization, since these referral links could be placed on arbitrary domains. For those routes (and only those routes), I would like to send an event to Google Analytics that contains the referral token. Unfortunately, adding this new onEnter functionality to some routes and not others requires that we write a new hook for those particular routes. I don’t see that as a scalable solution. Plus, providing a good name for that function is a nightmare - which to me is a major code smell.

Our workaround right now is to put the custom, route-specific actions in the lifecycle hooks of the route handler components themselves. It’s functional, and it doesn’t strike me as hack-y. But it’s not the ideal solution to my mind. I think enabling multiple onEnter hooks would provide a simpler, more expressive, and declarative way for us to create these more flexible transition actions.

Code Sample

/* Suggested API for passing multiple onEnter hooks */

<Router history={History}>
  <Route path="/" component={App}>
    <Route path="recommendations" component={Recommendations} onEnter={ [fetchDataForComponents, recordPageView, recordReferralToken] } />
    <Route path="profile" component={Profile}>
      <IndexRoute component={requireAuth(ProfileMain)} onEnter={ [fetchDataForComponents, recordPageView] } />
      <Route path="edit" component={requireAuth(ProfileEdit)} onEnter={ [fetchDataForComponents, recordPageView] } />
    </Route>
  </Route>
</Router>

In Closing

It’s possible that I’m missing something that makes this feature either unnecessary or very difficult to implement with the current API. Perhaps there’s a cleaner solution to the problem I described above. If that’s the case, we can close this issue. Otherwise, I’d be happy to take a run at writing the necessary code.

[baronswindle]

@chazsolo I wrote a couple of utility functions that you might find useful for composing your hooks. I just put them up on GH here.

[chazsolo]

@bjlewis88 This is very useful - thank you!