This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

React Router: setRouteWillLeaveHook

3:29 React lesson by

setRouteWillLeaveHook provides a method for us to intercept a route change before leaving the current route.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

setRouteWillLeaveHook provides a method for us to intercept a route change before leaving the current route.

Avatar
Zhenyang Hua

Why do we set the 'setRouteWillLeaveHook' in the componentWillMount lifecycle?

Avatar
Joseph

Great question! My personal preference is to make these types of component alterations before the component has mounted if possible. However, you could just as easily do it in componentDidMount.

In reply to Zhenyang Hua
Avatar
Arif

I wanted to clarify that it is setRouteLeaveHook not setRouteWillLeaveHook. Am I right?

Avatar
Joseph

Yes. Good catch.

In reply to Arif
Avatar
b62

What about routes with limited acces (role based)?

Avatar
Logan May

Thanks for these tuts! Really enjoyed it as an intro to React Router. I thought everything was self-explanatory, but I'm left with one question - how did you enable html snippets in your Sublime Text on .js files? Killing me writing <div> and <h1> over and over again hahaha.

Also, were you using custom es6 snippets here or did you get them from a pacakge? I'm currently using https://github.com/babel/babel-sublime-snippets for main React/JSX stuff

In reply to egghead.io

If we want to intercept the transition away from a specific route in React router, we can use something called route leave hook. To illustrate this, we've got a very simple application here -- just two components that each contain the slings component. We've got a path for each of those. We've got our home and we've got About.

What we're going to do is say that we want to keep track or do something -- respond somehow to somebody leaving the home route. To do this, we're going to end up using context. If you're not familiar with contexts in React, I would direct you to egghead.io. We certainly have at least one or more videos on it.

But what I'm going to do is create a full component here, since we are going to be using context. In our render method, we're simply going to return exactly what we were returning in our stateless version, so return that exact same content.

Here in our component WillMount phase, we're going to go ahead and call this context.router. We're going to say set route, leave, hook. That's going to take two arguments. The first one is going to be this routes route and the second one is going to be this.route willLeave. That's actually just going to be a method that we're going to create, so you can call that whatever you want.

Here's our route willLeave method. This actually takes a nextLocation, which is identical to our prompt that we can get from the router called "location," except it represents our next location. At this point you can do whatever you want to do so I'm just going to log out.

Leaving home for...we'll make this a literal string, or template literal. We'll say nextLocation.pathname, and now what we need to do outside of that is go ahead and add in our Context types. ContextTypes= it's going to be an object. We're going to say it requires the router and the React prompt type for that is going to be object, and we're going to go ahead and say that is required.

You can't use Context if you don't have ContextTypes. That's why we need to add this in there.

If you think about Prompt types in a React component, this is very similar, except you can't use Context without the Context type. Context types is like Prompt types for Context.

We're going to go ahead and save that and we're on the home route. When we nab away...whoops. Something is not a function. Route that says router. Try that one more time. We're on the home route and when we go to About, we can see that we have logged out, leaving home for About, which is the new path name.

Here we can do whatever it is we might want to do, but one interesting thing is we can just return that string and we'll automatically get a confirmation. Let's go back to home and we'll go to About and now, we've got this confirmation. If we say OK, it'll go. If we say Cancel, it won't go.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?