Hook into Route Lifecycle Hooks in Tanstack Router

Tomasz Ducin
Instructor

Tomasz Ducin

Code

In this lesson, we explore how to hook into TanStack Router's lifecycle hooks to execute custom logic during route changes.

The hooks we'll look into are: onEnter, onStay, and onLeave, which are triggered when entering, staying within, or leaving a route, respectively.

All hooks receive a detailed match parameter, providing information about the route's path, ID, and tons of other details.

This allows for the implementation of features like animations or logging when navigating between routes.

We also learn how to use these hooks to track and manage state changes as users interact with the application, making it easier to implement complex behaviors based on route transitions.

Share with a coworker

Transcript

[00:00] We mentioned that routes in TASDAQ Router have their own life cycle. So basically, when we walk from the employees route into employee slash 657 blah blah blah, or walk into the employee slash 123, the one that doesn't exist, we are essentially entering routes, leaving the routes or even staying within the same route. Now I'm clicking the same link over here. So if you have any reason to execute some custom logic whenever you change a route or stay within the route or for instance some animations etc. Then you might be interested in some of these callbacks starting with the on.

[00:39] So we're going to use the on enter. Now it accepts a match parameter which is going to be a very, very detailed definition of what this root definition is. So what is the path, what is the ID, what are the parameters, search parameters, and so on and so forth. So I'm not going to enter any logic over here, so I'm just going to keep things simple. So what we're going to do over here is also the onStay so whenever there might be a change but actually we are staying within the very same route.

[01:14] And finally onLeave so this one is going to be executed whenever we leave the root so let's save it let's reload the page and let me open the console over here now we can see that there is an enter over here but when I click john herzog we'll see that yeah I have left the 123 the not found one and I'm walking into another the 62684 etc when I'm clicking another one, I'm leaving the previous one, entering another etc. Etc. Now, let me just walk into that one was Ansgary Ruczynski. So if I just keep on clicking the same link over here then we can see that I'm staying within it. Now the last thing that I would like to show you is that whenever you're doing console logging, this could be slightly difficult if you have multiple console log statements.

[02:09] Now, you might be wondering, after adding lots of console log statements, what actually is this thing? So a neat trick is to basically get your variable and wrap it with a curly braces. And what is this thing going to change is that when you have it you will see the name of the variable that you have just been reading or writing previously. So if you have multiple variables that you're logging out at various stages of your application, then this will probably make it easier for you to reason what this thing is, the one that you are console logging right now.