React Router: setRouteWillLeaveHook

[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.