React Router v6 Preview: Nested Routing (TUTORIAL)

all right so I've been playing with react router v6 and I just put together this cool little demo using tail and you I have some nested routing I want to show you how it works you know react router v6 is not out yet is it's an it's an alpha or beta I'm not sure but figured be fun to play around with it you know that the backwards head-on so we're kind of in risky territory here and I have to get to Penn Station five o'clock for train to Baltimore so I'm going to Annapolis for the weekend getting out of the city and so you know why not try to record a video here with just a few hours left I think we'll be alright because I just ran through it it's really fun though so without further ado let's get right into it this is a navbar component from tail and UI and I'm starting out here in a brand new create react app with react router installed but it's not wired up yet this is just some HTML basically just some plain JSX with some classes and tailwind nothing works if you click you just see we go to some fake href here and so our goal is to get all of this working and in doing so we're going to learn a little bit about some of the new goodies that are coming with react router v6 so I think a good place to start would be to just get these links working so let's just wire up some links and make it so that we can actually click on these and change the URL so we can do that pretty easily if we come down to our anchor tags here let's go ahead and update these two link components now we need to go ahead and auto import these from react router and now we see that we're getting an error we can only use these in the context of a router component so real quick we can pop up to our index J s file here and let's go ahead and wrap this in a browser router which is going to be an import here from react router Dom and now let's go back to our app we can close this close this and we're seeing that we're getting an error cannot read property path name of undefined us because these links need aid to prop so let's go ahead and grab all these aid refs which we're just gonna blow away and for now they can all link to the home page here and now we have a working app so let's go ahead and make some new lengths this will go to slash team this will go to slash projects this will go to slash calendar and we'll leave dashboard here at slash and so boom just like that we can click around and get some links rendering now the first thing I want to do is get this active State styling working on these different nav links so when we click on team this should be indigo and underlined and this should go away so let's get that working now react router comes with a component called nav link so if I grab these and we go ahead and update these two nav link looks like it didn't update these parts but we can just do that manually here we're going to see that's not defined so we can come here and auto import that and so nav links work kind of similar to links but they give us this active class name attribute which applies some classes only when the link is active and so we can see here from our tailwind classes you know this first dashboard link is getting the active treatment and it has this border indigo and text gray and then it goes to inline flex item Center and then all these inactive links get the text gray 500 with the hover treatment and then they go to inline flex item center so the inline flex and the rest of these classes are kind of the same but this border and text gray are the active class treatment so we can just grab that slap it on all these links and we'll also grab the inactive treatment here and throw it on our first link right here from the dashboard and so coming back to our app it seems like it's working a little bit here there's some things going on well first of all the dashboard seems like it's always active and second of all we're getting this kind of weird hover style which we weren't seeing in the static version which came from tailwind UI so first let's fix the fact that the dashboard is always active and the reason that is is because this nav link is going to slash and slash is going to match on every one of these URLs so really we want this to be an exact match and only match when we're actually on the route and the way we do that with this nav link is to say and is true and you might see this called exact in other versions of react router but here it's called end and it's just telling us we need to match all the way to the end and so now we can see dashboard is is only active on the route URL so that's good so we fixed that problem so it seems like we're getting a little bit closer here but again we're running into the second issue which is that our hover styles here are colliding with the active styles so this is something I've run into in react router and reach router and a lot of these router libraries is that when you're using them with functional CSS libraries like tailwind you're gonna run into these collisions so if we take a look at the Dom here and we look at the second link under team it has the active classes the border indigo 500 but it also has these hover classes of boarded right 300 so really this is not what we want we want to be able to say these classes apply them when we're active and really we want to apply these classes only when we're inactive so ideally we'd be able to grab these have an inactive class named prop that looks something like that and then these classes right here would be truly the base styles that apply in every situation so let's go ahead and copy these and put it on all of our nav links here and when we save this if we take a look at our console we're gonna see that there's an error react does not recognize the inactive class named prop on the Dom element that's because nav link doesn't support inactive class name this is not an API that nav link actually supports so it's just forwarding it to the underlying anchor tag and react to saying well that's not a thing on anchor tag so what are you doing and so now what we're gonna do is actually rebuild nav link ourself and that's going to let us create this new API and as we'll see extend nav link even further kind of in ways us who are own use cases so we're gonna go ahead and just nuke this nav link import and we're gonna make our own nav link an nav link is going to render a link and so if we pass in the props and just forward them on to the link then we'll see that the nav works so under the hood we're going to use this link to actually navigate but we want to go ahead and add support for these other two api's here active class name and inactive class name so really what we need is some concept of is active State right we need to know based on the to prop that we're passing into each one of these links whether it's active based on the current URL location so determine based on current location and to prop so let's go ahead and grab the to prop and then we'll just forward the rest on here to the link so that we can use to right here and we're also going to want to pass in two to the link as well so if we save that we should still be able to navigate but we still don't see our active styles so now how are we going to determine if this nav link is active or not well react router gives us this really handy hook called use location so I can just hit enter and this is going to return a location object let's go ahead and log it and take a look at it here in the console so if we look at this log we'll see it gives us this location object with a path name of slash team which is the current path name and so as we navigate around this hook is going to refire and give us the latest path name so to start we can just say well we're active if the location dot path name is equal to the two that we passed in right the two problem and now that we know whether we're active or not we can create kind of an all class names property which is going to be the class name that we pull in so let's go ahead and do structure class named active class name and inactive class name as well and what's all class names well it's going to be class name plus a new expression right if is active is true then we want to go ahead and append our active class name otherwise we want to append our inactive class name and now we have all of our class names here we can say class name equals all class names looks like we're getting a warning here for and attribute let's just go ahead and delete this for now since we're not using this anymore and let's take a look looks like our new all class names property here is working and if we kind of zoom in we don't see that bug anymore where we hover and we get the styles from the inactive state so that's pretty cool just like that we've been able to make our own version of nav link here that uses this hook and the to prop and now we can just very easily use an active class name so this is pretty awesome now again like I said I've done this with a bunch of different of these routing libraries reach router etc and if you are working with tailwind or functional library it's really good to have an API that supports an active class name just to make sure to take time and figure out how to do it in whatever library you're using because you don't want to deal with conflicting class names this will really save you a lot of headaches in the future so I really like this API it's very simple and straightforward but let's keep going and build out some more of this navigation here and to start we want to actually change this title this content here as we navigate around the app so right now it just says dashboard let's come and make this dynamic and so the way we're going to do that is by right here this is where the content for the actual page here starts we want to kind of slot in our dynamic content right here so let's pull this out and we'll just put this down here for a second and right here we're going to render our routes and this is also gonna auto import from react router and in here we're gonna render a list of routes so we have four routes dashboard team projects and calendar we can render these like this we can say this will live at our route path and the element it will render is going to be to start just a P tag that says dashboard I think this is saying it's not defined so we can go ahead and import that and we're gonna have team projects and calendar team projects and calendar and so that's kind of how that API works we render our routes wherever we want the dynamic content to change and then whichever route best matches based on the path in the current location will then react router is going to go ahead and render the corresponding element so instead of just rendering P tags let's use this kind of page level component here from Ted when you I let's just call this a page and it will return some elements here it's wrap this in a div and let's make this take in a title and we'll just use the title prop just like that and so now this guy can render a page with a title of dashboard and same for these will render a page with a title of team projects and calendar and I think we need to close off this guy right here so now we have this page treatment back but we actually have a dynamic title that's pretty cool and our link style still look great let's let's keep going here and add some children routes to our dashboard so with react router we can add child routes that are nested and so right now these are all self closing but we're just gonna make them take in a block here like this and right here we can just render more routes so let's say we had in our dashboard right here we had something like an overview so we'll say let's render out a P tag that says overview at the root we'll render out a new users page here at slash new users and maybe like a sales path here as a third child of our dashboard so we refreshed our app refreshed here and we're still at the root but we're not seeing this overview rendering anywhere and that's because we haven't told react router where to put it right now we have this kind of parent routes wrapper which is just going to render the first match but because this is nested routing we are rendering the page right here and so react router is just rendering what we told it to which is just this block of JSX but we need to tell it kind of where to put the dynamic content and so right here this is the div with the dotted line on it and we can tell react router to put the dynamic content right in here using the new outlet component so if we go ahead and auto import that now we're gonna see overview being rendered inside of this dotted line here and let's go ahead and remove this dotted line there's overview and let's go to slash new users slash new users and now we see new users right there and so kind of as we go forward and back we see the nested routing happening here now let's give our user some navigation so that we can actually click links and get to these nested child routes more easily than typing these paths in the URL so to start instead of just rendering this page let's make a new kind of specific component called dashboard and we'll use this to actually render our dashboard route right here so instead of just rendering this generic page we will render a dashboard component and to start let's just copy the page component and render dashboard right here okay so we are back to where we were before but we can actually render some nav so I have kind of another chunk of HTML here from tail and UI which gives us this nav component and some links with just some classes basically all it is and so you can see here it's kind of this tab treatment and we only have three child routes so we can update this to be three links that correspond up here to our new child paths of overview new users and sales and now just like before let's go ahead and turn these into actual links but we can update these to be our own nav links and the href suis will update to be the two prop here and the first one will navigate to slash the second one we'll go ahead and match these right here new users and the third one will match sales now when we click we're actually navigating here and we're seeing the content being slotted into the outlet that we copied from our dashboard here but the active State is not working and that's because we're not using active classname so let's fix that it looks like the third tab here has the active treatment and so that's going to be this texts gray 700 and background gray so let's grab that slap it on activeclass name equals just like that and up here we see the inactive treatment is going to be text gray 500 and this hover class of gray 700 so inactive class name is equal to that so let's bring that down here and just copy this to all three of these and of course we could pull these you know if I were working in a real app we could pull these into some sort of tab Nataly or you know or tabs component but for now I'm just kind of keeping it simple so we can focus on the routing here and we'll check that out we got this active state here so now we've got this secondary nav working we still have our primary nav working but it looks like we have broken something here and that is when we're not on the root route our dashboard global now head or nav right here is no longer active even though conceptually we are still in the dashboard and so we would want that to be highlighted so that's what we're gonna fix next but it is cool that the nav link so far is working for both levels of navigation here we didn't really have to change anything to get it to work at this level so if we can fix this bug then we'll be in good shape so what is going on here well if we scroll up to our actual app we're rendering this nav link to the dashboard with a two of slash and you know in our nav link component we're just checking whether two is equal to the current path name of the location and so as soon as it's not it's not going to be active so there's a couple different ways you could think about solving this first what if our dashboard was actually at slash dashboard so let's say that this went to slash dashboard and then we were to come down to our route here and mount this at dashboard and so now when we click on this we're at slash dashboard and well these are broken right now as well so we'll have to come to our links and tell each one of them go ahead and add the prefix as well because these are the child routes so now we are kind of in this new hierarchy and I think we need to remove the trailing slash here we're in this new hierarchy where everything is mounted at dashboard so you could imagine us updating our nav link code here to say something like alright let's make sure that you know as long as the URL starts with this then we can go ahead and match and that way we'll match all three of these states right here because they all have slash dashboard in it right we could add something like I starts with prop you know and I've done this before and that's kind of an interesting solution that can kind of get you unstuck sometimes and in this case it would actually you know work for us but let's take the harder case right so if we undo all this and we go back to dashboard being mounted at the root of the application here which is totally a viable thing to do and is really more of a product decision what you want to be at the root then a technical decision we should be able to make this work and we can see that in some routing configurations the URL doesn't actually contain enough information to tell us whether a particular URL should be active or not so we can't just by looking at the URL and the to prop here determine whether a link should have the active or inactive class applied to it because it's just too ambiguous right but somehow react router is able to determine hey when we're on slash we should be rendering the dashboard and we should also be rendering the overview child route right so with if you look at this configuration right here react router can look at all of these routes that are provided and say for a given URL what is the best path through this entire router configuration so react router is doing some additional computation here to determine which out which path is active in which set of routes is the active path through this whole hierarchy and really what we want is to write our nav links to have their active status determine in the same way that react router is determining which route should be active for a given URL that way the notion of this thing being active is going to be lined up with what react router is actually rendering in our outlets in all the dynamic parts of our app and so fortunately for us they expose some cool hooks that let us do just that so in order to take advantage of these cool primitives we actually have to just do a little bit of refactoring and we're gonna start by pulling out our routes from JSX right here and making them just plain JavaScript array of routes so let me show you what I mean let's start with just our four kind of top-level routes like this just to keep it simple and I'm literally just gonna say Const rats equals it's an array of routes and these are going to be objects with a path key and an element key and for the element we don't need this JSX right here or right here and we can close off the object just like that so this is just a JavaScript array of objects with a path and element property let's go ahead and comment this out and instead we're going to use a new hook called use routes that's going to auto import up here right there and if we take a look at this we see that it takes in an array of route objects as its argument and so that's exactly what we're going to do is just pass in this array of routes that we just defined right here in JavaScript and we also see that it returns the element of the route that matched the current location so this thing actually returns an element and we can just slap that in right here right where we are rendering our routes hierarchy before hit save and check this out these four routes are working again so basically you can think of this routes component as a light wrapper around this use routes hook which is going to be looking at the location and a set of routes to determine which route and therefore the which corresponding element should actually be rendered so that's kind of how this works under the hood this way we just have access to a little bit of a lower level primitive here that does the same thing so here's the four routes that we had but we're not quite back to where we were because we have these child routes that are not recognized right now but we can add these three child routes just like we had before and how do we do that in this configuration well we just say children is equal to an array and here's our child routes and we'll do the same exact thing these are objects with a path property of the path and an element property that points to what should actually be rendered and so now we have those as children and check that out our nested routing is back so we basically just refactored this from this route to this javascript array and now we're using the use wraps hook and we're right back to where we were so we still have this bug with our nav link so why the heck did we do that well it's because we can now use this configuration inside of our nav link component and the way we're going to do this is with another new primitive here a function called match routes so we can go ahead and auto import that and if we take a look we're gonna see that this takes in an array of route objects which we have and it also takes in the location the current location which we have as well so we can pass in our routes as the first argument right there and we can pass in our location which we have from used location right here and again if we look at what it returns see that it returns an array of route matches so let's say let route matches equals this and let's just log these rap matches out and take a look at them in our app let's start with one of these simpler routes here so we'll go to team and we're getting four renders because we have four nav links being rendered but if we look at the route matches we'll see it's an array and it only has one element in it it tells us basically which of our routes right here and our config matched against the current location and it's giving us an object with a path name of team no params and then a route property which points to kind of the original object we used here in our routes configuration and we can see here that the path name is team that's the match so you can start to get a feel for how this is working right we would expect to see this route match against projects and if we go to dashboard well now our route matches goes up to 2 because react router is actually matching against two of the routes here because of the child route that's matching right so the first match is going to be this route route here our dashboard one which has a path of slash and it has three children so that's that's this object right here but then our second match is going to be the child route that matches which is right here it's also a path slash but it's actually this one on line 36 right here so if we were to flip over to new users we're gonna see again the route route here for dashboard is matching so again conceptually that's kind of what we want for this link right here right this is always matching because these are always children of this and then the second match here is for slash new users and then again we would expect to see sales match the third time and we do so conceptually is active is not really if the locations path name matches this it's if any of the route matches match against the two that we've passed in so really we want to check through and iterate through this array of route matches and see if any of them have the right path name right so in this case path name is slash of the first one in this case even though the second one has gone in new users the first path name here is still slash so let's try upgrading this this is kind of our first implementation here our second one is going to say is active it's going to equal our route matches and we'll use dot sum to see if any match has a match path name that equals our two problem okay let's check this out and see what it does so our dashboard is active we're on new users or on sales or an overview so dashboard is staying active but as soon as we go off it doesn't match so we've fixed that issue now we see that there's another issue here overview is staying matched but just to recap this is pretty cool what we've already done so again we're not doing a naive comparison based on the fact that in our nav here we're passing a slash because otherwise as we saw earlier that would mean that dashboard stays active even as as we go to team and projects right we're actually using the same logic that react router is to know whether this first object matches and if it does then we should apply the active treatment so this is definitely an improvement but why is this overview broken well let's take a look at our logic here if we open this up and we click on overview we're basically checking to see if any one of these match slash and obviously on the first one they do but what about when we go to new users well when we go to new users we have these two matches right here one for the route route which is the dashboard route conceptually and then one for new users but because overview here is mounted at slash we actually don't have enough information to disambiguate and to say this is a child right here this is the parent now if you look here at our first match will see that it has children and so if we were to you know do a little bit more work or annotate these routes with a little bit more information maybe we would get this something like a name property of dashboard and maybe this one something like a name property of dashboard overview something that would let us easily disambiguate these then we can make this work kind of more generally you can see this is a pretty tricky problem but in our case one easy solution would be to add support for that kind of exact per am and that way if we're not exactly on the slash here then overview wouldn't be active so let's come down to our overview link right here and just tell it that it should only match when it's exactly on slash and so now back here in our nav link we have a new exact prop and really if exact is true we want to go ahead and fall back to our first implementation which is just going to check whether the two is matching exactly the location path name so I think we can consolidate these and we can say go ahead and let his active be declared if exact is true then we want is active to be this otherwise we want it to be this something like that and now we see overview is only active when we're actually on the slash here dashboard stays active because it's just looking for any of the route matches and now this is actually looking pretty cool so you can see kind of solving this generally would be pretty tricky this will actually work pretty well for child routes that aren't nested at the root but if you were to go another level and have more child routes of overview of dashboard overview here you'd want to do something like well talking about where you have some more information here and you traverse this when you're determining whether something is active maybe we can do that in another video in the future but again you know when when you're building these kinds of Link's components for your apps using these lower level primitives sometimes the best thing you can do is get something that works for your use case so that you're not stuck and you have something working and so far this is working out pretty well we can see here we're able to get the active State on the primary nav and on the secondary nav and we're gonna see it takes us even farther than that so this is a pretty good solution for now and our active state is working just great so I think we have time for just a few more cool things to explore from react router v6 and to start I want to go back to when we moved the dashboard here from / - slash dashboard so remember we kind of started by doing that here and saying let's go ahead and mount this at dashboard and we'll change our link here and the header to go to slash dashboard right and that way if we go ahead and visit / - board in our URL we can see it the other links still work but the problem is we've kind of broken things here right because all of these child links if you look down in the bottom left you'll see they are coded with absolute URLs and so if we actually did want to make this change now we'd have to come back down here to our dashboard go ahead and add the prefix right here right like that what if there was a better way well there actually is with react router v6 and that is we can use relative URLs instead of absolute URLs so right here instead of just hard coding this because this is really a link to the overview relative to the dashboard here right and relative to the dashboard it's kind of at the root so we can use a relative URL there we can use a relative URL here and here and if we save that now we can click on overview and new users and we see that all this works as far as our rendering goes right so that's pretty cool because it lets us compose our app with these components that don't actually know kind of where they're mounted and we can change that now in one place right here but there's a problem and that is that we've screwed up this nav link that we just worked so hard to get working the active State is not applying anymore and it's easy to see why if we go ahead and log out the to prop that we're passing in and pop open the console we're gonna see here's all the links that we're rendering here are the four in the header and here are the three secondary links and those are the relative URLs that we just added right but we're comparing them to location that path name and match that path name if we were to take a look at location dot path name here go ahead and paste that in we're gonna see that this is always you know a full absolute URL regardless of where we go in our app so wouldn't it be cool if we could have all this working and still have our nav link work with the active State well turns out we can with another cool primitive from react router called use resolved location so this is another hook that we're going to import and if we hover over this we see that it takes one argument a two so we can just pass in our two prop right there and if we look at what it returns it says it returns a fully resolved location object relative to the current location so let's just take a look at this let resolved location equals and let's log out resolved location so this is an object that looks an awful lot like the location object has a path name that's kind of what we're interested in here but each one of these path names is you know a full you are so if we were to just log out resolved location dot path name there we go we see our our three kind of child routes of dashboard all being rendered but it's the full absolute URL so as long as we use this everywhere we were using two before so let's just grab two right here and right here and swap it out with resolved location dot path name check this out we got our active state back and now we can come down here and say let's say we wanted to put this dashboard on new dashboard so this whole thing is going to be on new dashboard we just had to change it once and we just have to tell our header link here that we want to go to new dashboard so now let's start off the app team click our new dashboard and check that out our nav link is still working all these links are working I mean this is really really cool because conceptually this entire thing has no idea where it's mounted within the application I mean it's almost like a separate application itself and all it has are these links and rendering different dynamic content to the outlet here relative to wherever the parent is being attached so I thought this was a really cool feature of react router v6 I've never really worked with anything like this where you can use relative links like this have it self-contained speaks to the power of the library and it feels really appropriate in react where one of the key ideas is composability and building components that just don't have knowledge of anything outside of themselves or where they're at it's a really really cool part of library so I like that it is working so easily and I was also really surprised and kind of impressed that this nav link that we have is working as well I mean we're passing in relative URLs here but we get to use this really cool resolved location hook which is doing all this work for us and the active state is working just great so one more thing I want to show you just because I thought again it was just one more really cool thing and I think we have time for it here let's go one level deeper and make some third level of nesting routes here right in our new users child route so I'm gonna come here to our new users and go ahead and add another level of children right here and we're just going to add one child and it's gonna have a dynamic path so it's gonna have a dynamic segment and this is going to render you know some user detail page right here so let's actually instead of just these being these P tags let's make them real components so we'll close this we'll close this and let's start with the new users page so we'll just say new users there's a new component here we'll return a div with a P tag new users and we'll render this component new users and right here let's just render out some data so let's get an array of 20 items grab the keys spread that on to an array and we should be able to map over this and render out you know user index cool that's margin here so now we have this kind of user list and we want to make these links to link to our new dynamic path right here so let's grab this and we'll wrap this in our handy-dandy nav link and this will go to our index and again we can just keep using the relative links here and just pass in the index now if we come over and check out our console we'll see we have a couple errors the first is we need a key prop so let's just make react happy here equals index should get rid of that second is that we have an invalid prop to supplied to link and that's because this index here is a number and needs to be a string so let's just kind of course those two a string like that all right we have no errors and when we click we see the URL being updated as slash 2/0 pretty cool again we have the relative URLs here we don't have to know or care who is rendering new users where they're rendering it I mean it's really neat you can imagine the reuse you get out of this because this thing again all our cares about is that it's being rendered by something that has a child path with a dynamic segment in it it doesn't care that it's a new dashboard or anything like that pretty cool so we got the URL updating here let's actually render some dynamic content kind of in a master-detail style and so our new users component right here renders the list let's just do like a two column treatment here so class name equals grid grade calls too this will be kind of our first column right here and then our second column we want to render the dynamic content right we want to actually render this user details element so how do we render a dynamic nested content and react right or6 well we use the outlet component so this is an example of us kind of using it again we're using it once in our dashboard page right here to determine which of these second level wraps to render and then now we're using it in this third level to tell react Rider hey let's go ahead and put this in the second column so it's outlets all the way down and that's how you do nesting it's pretty awesome it's kind of like this Russian doll styled nesting that you might be familiar with from you know other frameworks or even backend frameworks but this is basically how you do it and so we're rendering user detail how do we actually get you know the matched user which / am is active over in our detail well let's first go ahead and make an actual component for this so function user detail like this returned user detail and will come up here and render this right here user detail instead of the P tag make this a little bit bigger and bold but we want to get the actual number right how do we do that well we can just use Rams another hook from react router so this is going to give us the params and if we go ahead and log out those params it's probably going to be just what you expect ID 4 so the ID is coming from this dynamic segment where we defined our route and for is coming from the fact that 4 is in the URL so as we click around we should get the correct ID here so that means we can use this directly in our JSX and just say user paramus master detail it's all synced with the URL we can use the back button we can refresh everything works and again our nav link just worked here with this dynamic segment now what about our active class name API let's make the active class name text gray 900 and the inactive class name text gray 300 check it out can even add another hover treatment here hover text gray 500 and just like that nav link to the rescue I mean this is pretty neat it's working with dynamic segments it's working with nested routes it's working with routes that are mounted at the index we have the exact prop on there and this is pretty cool you know when I started working with libraries in the react ecosystem I was kind of hesitant to dive in this deep and use these lower level primitives from libraries like this because I felt like you know the provides me a nav link and should not just be using that won't mind not work as well and of course you want to use something from the library when they give you something that works but as you can see here you know the primitives that react router provides you are really at different levels of abstraction I mean nav link is a very high level the one they provide you whereas something like this Matt routes function that we used is much lower level and they're doing that because there's a lot of use cases here and apps get complex and you know even in this kind of relatively simple demo we saw that there was a good amount of work to get all this stuff working but once we did we have this nav link that only uses things that we understand and it feels really empowering to be able to build these up with these lower-level tools you know I looked at the codebase a little bit it's really not that bad I can show you right now if you go to react router on github and you click on branch dev this is going to be where v6 is at and you can just pop in here right in here to you know something like react router Dom come to the index and this is going to be everything that's exported so if we search for nav link you're gonna see right here well.there nav link is just a wrapper of link that knows if it's active or not and look at this they're using location and resolve location they're doing a little bit more but not much more than we did and you know we wanted to add this inactive class name kind of feature this API to our nav link and we were able to do that very simply and so again as I've worked more in react you know I think the libraries in the ecosystem are more like this they kind of embrace the lower level primitives that they exposed to you and almost expect you to learn how to use if you want to be as productive and efficient as you can and to me that's something that I'm not necessarily used to but it's also better than just being told hey you know here's the nav link from the library we support active class name but you know what we don't support an active class name because then you're just having to do some hacks to work around this I think it's pretty nice to be able to be given the tools that you need to build your own Naville encodings of the API is like we did here and now that we're a little more comfortable with these primitives like the match routes and the use route stuff you know it just kind of demystifies the whole thing a little bit more and it feels really empowering and honestly kind of fun to build like this so I hope you're excited about react righto v6 like I am I think the nested routing stuff the relative routes I mean there's a lot of cool stuff here and we didn't even cover like we didn't even cover everything that's coming out so yeah I hope you learned something and if you have any questions let me know in the comments I got to get on a train I got to get a Penn Station I'm going to Annapolis for the weekend time to get out of the city you know it's just been kind of crazy here with the quarantine and everything so I'm looking forward to a little mini vacation but I hope you all are well thank you so much for watching and I'll see you in the next video

Channel: Sam Selikoff

Views: 12,817

Rating: 4.9378238 out of 5

Keywords:

Id: F5eDWtJRYaI

Length: 49min 38sec (2978 seconds)

Published: Fri Jun 12 2020