React Router: setRouteWillLeaveHook

Joe Maddalone
InstructorJoe Maddalone

Share this video with your friends

Send Tweet
Published 6 years ago
Updated 3 years ago

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

[00:00] 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.

[00:22] 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.

[00:45] 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.

[01:00] 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.

[01:33] 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.

[01:53] 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.

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

[02:36] 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.

[02:48] 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.

[03:10] 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.

Zhenyang Hua
Zhenyang Hua
~ 6 years ago

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

Joe Maddalone
Joe Maddaloneinstructor
~ 6 years ago

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.

Arif
Arif
~ 6 years ago

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

Joe Maddalone
Joe Maddaloneinstructor
~ 6 years ago

Yes. Good catch.

b62
b62
~ 6 years ago

What about routes with limited acces (role based)?

Logan May
Logan May
~ 5 years ago

Here's an article on user roles with React Router: https://hackernoon.com/role-based-authorization-in-react-c70bb7641db4