React-router: Default onEnter function

[ataker]

I'm looking for a way to have a default onEnter call that happens every time the route is changed. Ideally after that I would be able to do I specific onEnter function for each route, but right now I'm just looking for a way to avoid adding the same function on every route.

[mjackson]

Can you describe at a higher level what you're trying to achieve? There's probably a better way than adding the same onEnter function to every one of your routes.

[ataker]

Probably the simplest example I can give (and one I would use it for) would be authentication. IN the example, the dashboard page needs authentication and looks like this:
<Route path="dashboard" component={Dashboard} onEnter={requireAuth} />
Basically, I want the requireAuth function to be always hit without having to put it in every Route.

[mjackson]

The fact that routes are nested means you don't need to require auth on every route, only on a common parent route. See the auth-flow example. The requireAuth function in that example could be set on a parent route to require that all descendant routes are auth'd.

[ataker]

Thanks but I'm not sure this is what I want. So given the following:

<Route path="/" onEnter={this.checkAuth}>
  <Route path="about" component={About}/>
  <Route path="Dashboard" component={Dashboard}/>
 </Route>

the checkAuth function would be hit when entering About or Dashboard, but if I move from one to the other (About -> Dashboard or Dashboard -> About) checkAuth does not get hit.

[nwinch]

I'm experiencing the same issue - can this be reopened?

[taion]

You're trying to model a different concept - hitting an onEnter hook when enter the parent route is not the same thing as hitting that hook for each of the child routes. The onEnter-on-parent pattern by design gives you the former, not the latter.

[icem]

I have the same issue. Most of routes require user to be authenticated and I need to check authentication on every transition. There are about 20 of them and growing, so adding onEnter hook for each is too much boilerplate. I don't see any other way to achieve authentication on every request in react-router. I use history.listen for that but it doesn't seem right. Any help would be much appreciated.

[renegare]

Probably late to this; but using a combination of onEnter and onChange May do the trick ...

[cdutson]

Sample scenario I'm struggling with:

Whenever the user navigates around, I want to make sure that the token they have stored (using JWT) is still valid. So what I'm looking to do is whenever the user enters a page, I do an async call to an API end point that checks token validity. If it's valid, let them continue, if it fails, route them to the login page.

Right now the only way I can see how to do that is to literally have an onEnter on every route, which doesn't seem like a very scalable solution. It would be nice to be able to apply an onEnter that cascades down to each child.

The only solution I can think of right now is to to mangle the Provider by pushing onEnter props onto all its children using a cloneElement lop

[taion]

Use onChange.