Building a React Router Clone | So Simple!

[Music] hey everyone hope you're doing well so today we're going to be having a quick look at react router we're going to be building a very very basic super minimal clone reactor we won't have nearly as much of the features but we'll kind of hopefully give you an idea of how it works in general i did a live stream on this uh very recently where we actually dived into the code we you know downloaded the source code dived into it and actually looked at each component and seen how it works if you're interested in that i'll leave a link but in this video we're just doing a very very quick summary and basically building building a clone that will hopefully work so if you enjoy this kind of content please consider subscribing and let's get right into it so i've just got a brand new react app project here and i've just made this using veet and i've removed some of the boilerplate so just standard it's got the index html which refers to the which points to the main jsx and that's we're just going to be playing the main gsx here just the one file just to keep it as simple as possible so what i'm going to do is we're going to head over to the react router documentation the idea here is i'm going to copy a kind of a sample from the documentation a very simple sample and make sure it works and then i'm going to remove the react router dependency completely and try get to work without that so i'm going to head over to the dev branch so this uses reactor v6 which is i think it's still in beta mode so uh v5 is what's out now um yeah beta mod and you know i think in terms of api they might be slightly different there might be a few kind of slightly different components but generally the concept is very similar so it should be fine in terms of understanding how it works and i'm going to head over to the docs directory i'm going to go over to getting started and i'm basically just going to start copying over this this very simple sample and see how it works so i'll copy over the um imports and i think i need to add a link as well i'm going to copy over the the roots here from the app um actually what i'll do is i'll copy over the entire app here but i'm going to that's fine actually for now i'm going to scroll down and just have a quick look at the navigation so i'm going to copy these two components here so we're basically going to have a home app and a an about app and they will just be simple h1 so i'm just going to remove everything else from this whole map and i'm going to move the navigation to the uh to the main app here so that will keep it very simple just convert that just to remove some space and of course i'm going to add yarn adds react router dom and i'm going to make sure i do at 6 and i'm also going to add history which is a pure dependency of react router so i'm going to add that in here and i think that needs to be version five so let's just go for the latest version um that's fine close this and i'll just restart my dev server just in case and head over to be on the right hand side here just refresh this and let's see what the issue is here um of course i've forgotten to add the router at the top level here so i'm going to remove the strict mode here we don't really need it uh i'm just gonna wrap my app in router and i'm gonna come back here and refresh the page there we go so what we have here is we have the um kind of the top level router component wrapping our entire app and then within our app we have navigation which is basically a few links and to home page or about page and then we have a roots component so that's component number two number three including the link and then we have the actual route that we're playing with so slash goes to home and about goes to about so as i click these two i can basically navigate um back and forth simple as that great now a good starting point for me usually is to inspect the element and just have a look at the the dom elements that are actually being created um you can see here we've got kind of a few components we've got the router we have the link you've got the roots and the the root itself um and of all of these i think the link is really the only one that you know creates dom elements for us right so if we jump into uh elements we select one of these links we can just see that we're basically rendering a tags standard html links and there is a bit more logic going on in behind the scenes with you know react router and how it creates the actual href it handles a few pieces you can see here for example we don't have the the um the slash at the start but it is being added um here on the link so there's a few things going on there um but at the very base level basically it's just rendering a link tag for us to use and then there's no real other reference to anything else going on in terms of routing we can see that our about page is being rendered um of course and there's no kind of trace of our homepage which is what we'd expect so everything's kind of standard here um yeah let's go on and have a quick look at the elements and see how they work so we're going to start off with the router component now this is going to wrap the entire application and what i have here is i have react rear open up locally and i've opened up on um so within the packages directory react router index tsx we have a router component actually the structure of react router is actually quite you know very simple it's basically got its different packages some mono repo and but everything's essentially contained within one file which is the index tsx we can see all the different kind of components there and it's actually quite easy to to look through um so what we're going to do is we're going to have a very brief look at react router here and well the router component and the only thing that we need to understand here is that you know as well as kind of the props that are coming in um it basically checks if you're inside a router but really also providing is a couple of context providers here and in this case the navigator one is basically history um which we'll look at in a second and then we have the location provider so in terms of what are you know what is history and what is location well we can have a quick look at the browser for that so of course um the main thing with the browsers you know different browsers gonna have slightly you know potentially slightly different implementations and if you're outside of the browser like react native or um just not in uh you know in a node environment these don't exist so of course react ruler kind of abstracts all this out and makes it all simple to uh to understand but um if you head over to the console here um under the window we have both location as you can see there and we have history right and these are re-exported at the top level so i'm going to enter on history um i'm going to enter on location and we'll have a quick look at these objects just on just to understand what they do the history is is essentially what sounds like the history of the tab and everything that you've browsed so as i click um on these links about home about home a few more times we can see that basically it's adding um it's adding to essentially a queue or a stack or whatever you want to call it a list of history items and we can't access the history items directly but we can access is you know the number of uh history items that we have and we can access basically the navigation between the different history so here we can see that as i click uh more if i go on history again history again it's gone up in length that's just going to keep increasing and then what you can do is you can then use history to do things like um go you can see i've done this before go minus one so you can basically get a delta and move back and forward basically um or you can do forward and back etc so um there's a few things you can do in history that's basically manipulating exactly what sounds like the history uh of the tab right so that's the history provider in terms of location location is basically everything to do with the url so if i open up the location here we can see uh we have the host which is localhost 3000 so the host name the path name and if we add or if you jump to about and again we click on location here hopefully you can see that [Music] location we can now see that again it's got everything the same but it's also now got this path name that you're on and within react brewer there's a few kind of helper methods i think if you've got you know different path parameters etc and it gives you the ability to parse them easily et cetera so that's basically what the history and the location does in our little clone we don't need to add these additional uh providers because we're going to use the history and location directly from the browser and that's simple as it gets there so next up we've covered the router list have a quick look at the routes and again we can head over here and go over to the roots component which is just here and let's expand this and you can see there's a couple things going on here i'm not going to dive much deeper into this but you can see the main things is um it basically is creating roots from children and then it's returning this hook use roots and we will actually dive into this just to see how it's rendering but the first step it does is it's basically going through all its children and reading the props you know reading the different elements and trying to create a sort of root tree or a list of roots that um that all the children's provide right and then in this use roots hook we can just expand this for a moment um there's a bit of kind of logic going on obviously this is where the matching goes on so we're matching the url which we've taken from the location and we're checking it against all the different routes um from the the routes we've just uh received and then we're actually just basically taking all the matches so anything that matches the location and the current routes and we're basically going through and rendering them all in kind of a nested structure within components so uh the roots here is actually doing bulk of the work it's like i said going through all the children finding the routes um that are available and then doing the logic to figure out which ones should be rendered which one shouldn't and then actually rendering the roots so that leaves the question if the roots is rendering everything and what does the root component do and if we head over to the root component um you can see uh things this one here doesn't actually do anything um the root component i think from what i can see is basically just a a container um for the path for the element for the different props and you can see here that uh ignoring this invariant here it doesn't actually do any rendering itself so it's just a way to declare these are you know the different routes it's actually the roots component which is one level above the one that does actual rendering which i thought was uh you know a pretty interesting way to do things so the the final thing i want to show here is uh the link component and the link component exists within the react router dom because this is a browser link so i'll jump over to react router dom and i will just look for the link component and we've already had a quick look at the the link component in the uh the browser and you can basically see it does it very little logic here it's essentially forwarding um all the the props it does a bit of logic for handling uh clicks but um essentially it's just rendering an a tag and passing in uh some of the some of the props and like i said earlier on use href this hook it basically takes the the actual link and it kind of formats it nicely so that's pretty much everything that i wanted to cover in terms of react router and that hopefully gives you an idea how it works so this gives us everything we need to very quickly build a clone so let's go ahead and do that so the first thing i'm going to do like i said i'm going to remove this import refresh this page it's not working rear isn't defined let's get to work on um on these right so i'm going to define router and as we said router is basically just kind of a wrapper that adds um some context onto the to the roots right as the history context as a location context we have them in the browser so what i'm going to do is actually i'm just going to ignore um kind of rendering anything here and i'm going to render the the children right so i'm just going to pass that through render the children refresh this okay is done now link is not defined and move on to the next one um link like we said is basically just an a tag so i'm going to take essentially all the props here and i'm just going to render an a tag with the props so i'm just going to spread over the props so i'm going to say every property pass into the link just pass it to the a tag with the exception with the exception that the link takes in a 2-prop whereas in the a tag it's called href so what we can do here is we can just uh wrap that in brackets so we're going to destructure the two tag we're going to spread the props so that's basically the rest of the props and we're just going to explicitly add in href and pass in the to tag and that's it that's all we need for the link so that should be relatively simple there so next up we have the roots and the root so if we do the root first because that's a simpler one and again we basically said that the root doesn't actually do anything it just takes in some props uh and it holds that for the roots component to render but the root itself doesn't do anything so i'm just gonna create basically an empty component here so root just returns null and the kind of i guess the most interesting one is the roots component and the roots component is the one that's doing the bulk of the work and it's all based around the the children we don't really do anything else we're just taking the children and what we want to do is we want to like you said we want to go over all the children and kind of do matching logic and then render whatever and that can get quite complicated i'm going to do the most simple version of this possible i'm going to use the react.children helper method so this is just going to iterate through all the nested children we're going to do map and we're going to pass in the children here and we're going to pass in a map function and essentially we're going to do is we're going to see if the location path matches the root path exactly as is then render the child otherwise and basically just ignore it so we can do that by just saying if the child dot props dot path is equal to location.path name so if it's equal we want to render we're going to return child.props.element these are coming from remember the root there so i'm just going to let's just enter here so we can see that otherwise we want to return null i think that should be it so if i refresh this guy uh so that's rendering the home fine and not the about fine of course in this case um it's handling things like the starting slash and you know the link adds that and it all kind of works in this case we don't have it so let's just quickly add the slash about uh on both places and now we refresh this we have the home we have that about it's absolutely working fine so this is absolute minimal way of course this won't work with kind of nested components and it doesn't work with anything more complicated than what we have here but this is hopefully kind of gives you the idea of the very basic concepts of you know client-side routing and in general how react router works so i think that's everything i wanted to cover in this video thank you very much for watching have a good day and i will see you in the next one [Music]

Channel: Redhwan Nacef

Views: 68

Rating: 5 out of 5

Keywords: Software engineer, software developer, how to, how to code, coding, programming, testing, java, javascript, learn to code, learn coding, learn programming, software, technology, computer science, YouTube, Redhwan Nacef, react-router

Id: 5gMk-Wi55CU

Length: 14min 55sec (895 seconds)

Published: Sat Sep 18 2021