Active Routes

[00:00:00]
>> Scott Moss: So active routes, this is a common thing you do in every single app, the fact that I have to talk about it in intermediate course and not a beginner course is telling just how not simple it is. But it actually is kind of simple, it's just it doesn't make sense in the world of server components, a client group policy, so that's where it gets confusing.

[00:00:18]
So as you saw earlier, there's a hook, call it use path name. There's actually many hooks that we could use for trying to figure out the current route. In fact, there's use selected layout segment. There's a lot going on here, I think this will, which also adds to the confusion, like which one of these hooks do you use?

[00:00:44]
This one has something to do with parallel routes, maybe it's kinda all over the place. But in reality, all you really wanna use is the use path name. This one returns a string of the current path name in the URL. For the most part, that's what you want, the other scenarios are a little more advanced and things like that.

[00:01:03]
But for us, we just need this, and the reason we want this is so we can show a highlight on the nav bar on the left of which route is active. So, you know which one you're looking at.
>> Scott Moss: Because it's a hook, it has to be in a client component.

[00:01:17]
So remember that has to be in a client component. If you want your nav bar to be a server component and not a client component, then what you would have to do is you'd have to make every single link in your sidebar. You'd have to make a link, like a sidebar item component.

[00:01:35]
And that component would use the use path name, and you map over many of those inside of your server, sidebar component. So the sidebar itself will be server, but then each individual links that get rendered or the each individual items are client side because they need the hooks to know if they're active route or not.

[00:01:56]
So you can do it that way as well. And that's it, the strategy that next day has to react is pushing people to try to push client sides further down the stack. If there is something that doesn't need client interactivity, make that a server component. And if there's something that needs interactivity, just make that interaction a client component.

[00:02:18]
So that's how they're trying to do it, so it's like, it's kind of like back in the day when like Redux came out, and everybody was making like components for everything. You make a component for like a text [LAUGH] Or like a letter component. [LAUGH] Okay, I get it.

[00:02:33]
We get it, you like components. So it's kinda that, but like with client components, all the way down. So I didn't feel doing that, so I didn't do it. We are, though, because it is a hook, you can't use it server side, okay? So I talked about this earlier, you can't use it on the server and trying to access it from the server or trying to access the current route on the server leads to.

[00:02:56]
As we talked about, if you access something like the headers or cookies or anything on the request changes the strategy of how that route is treated. So if you're, I'm gonna get the current path name and do something here, but I also want this route to be static.

[00:03:11]
Well, it's not gonna be static because you just accessed the headers on the server side, so you opted out of that and you didn't even know it. So you built it in production and then that's when you saw it because on dev, it works differently, so it's kinda weird.

[00:03:25]
But yeah, so let's, let's fix ours. So in our, we have a component called side, that's a sidebar. We're gonna make a function that takes a path, takes a route and determines whether or not it's the active point. So, let's do that and we'll go to side at the top.

[00:03:42]
I'm just gonna keep this function outside the component store reason to put it in having it recreated every single time, cuz this is a client component so it will rerender multiple times. The path is the path from path name, the route is there, one of these routes here.

[00:04:01]
>> Scott Moss: And it's pretty simple, it's just a string check because every one of them starts with slash dashboard, but only one of them is actually slash dashboard. We check for that one first. That means you're on the homepage, the grid that we've been looking at. All the other ones, I just need to make sure if it includes this route, then that's the path, cuz they all have different names, so we got that.

[00:04:23]
And then really, the last thing we need to do is just CSS stuff. So, there's a lot of ways you could do this, but actually, I think it's different. What I'm about to do is different than what's in the notes, but I like to use this function called cn, which stands for, clap.

[00:04:40]
What is this, what does it actually stand for? It's like CLSX plus, Tailwind merge together, best way I can describe it. So I'll put my original classes in there, and then I'll say basically, okay, if something is active, so is,
>> Scott Moss: Is active, pass in the path. So we got to get the path here, so this be path equals, use path name, like that.

[00:05:13]
So is active, passing the path and then pass in the Linked out route.
>> Scott Moss: If that is true, then I can say, cool. Add these CSS classes which are active, class like that.
>> Scott Moss: You can also just interpolate which is what, think I did in the notes.
>> Scott Moss: The CN thing, it basically merges.

[00:05:39]
Class names together, and then it also there's like this known issue with tailwind classes that if you don't put them in the right order, they don't work. So this thing figures out the order in which your teleclasses need to be in so they work the way you thought they should.

[00:05:53]
So it does a combination of those two things.
>> Scott Moss: Also tell when classes are statically analyzed. If you do not write the tell when class out, verbatim, it won't be included. So you can't dynamically do things like this, where this is like something here. That's not gonna work cuz it doesn't know, it can't statically analyze that, so it won't get included.

[00:06:24]
So you have to write all your classes out. If you didn't know that, if you've ran into issues, that's why.
>> Scott Moss: Okay, so we got that, and now, maybe we can see some highlights. On our sidebar, refresh my, I got to start my,
>> Scott Moss: Do that, go back here and refresh this, there we go.

[00:06:56]
So there's home, okay there's events these don't work cuz we haven't really made them but there we go there's events these don't work cuz we haven't really made them.