In this video, I'm going to teach you everything
that you need to know about React Router and how to work with it in a React application. By the end
of the video, and only if you watch it until the end, you're going to be able to implement your
own client-side routing solution in React using React Router. Let's get into it. All right, let's
begin. As usual, in front of us, we have a very simple React application. This application, it's
only doing one thing. It's taking this HomePage component here, and it's rendering it on the
screen. This is what the application looks like, and we have HomePage right here. This is the
HomePage component. It's an empty component. All that it has is one empty H1 tag. And also here
at the left, we have two more page components. We have ProfilePage, which is also empty. It just
has ProfilePage. And we also have ProfilesPage with an S. This one just has a little bit of code
here for the eventual profiles that we're going to implement in this simple application. Our goal
for this video is to implement client-side routing in this application. We want to implement a way
for our users to navigate between the HomePage, between the ProfilesPage, and eventually also
be able to get to a profile page of a specific profile. So to do that, the first thing that we
have to do is we have to replace this HomePage component here in our main.tsx file, which is
currently hard-coded to render the HomePage component. And we have to replace it with a router
from React Router. So the first step for us to do is to come here at the top, and we're going to
import createBrowserRouter from React Router DOM. And then we're going to come here and we're going
to create our actual router. So we're going to do const router equals createBrowserRouter. And for
now, we're just going to give this an empty array. And later on, we're actually going to implement
our specific routes. Now, there are multiple ways that you can create a router with React
Router, and this is only one of them. However, this is the recommended way, and this is the way
that React Router will recommend if you actually go and look at their docs. This specific router,
the browser router, in 99% of cases, is the one that you're going to want to use. This is the
one that is exactly like your typical browser navigation. You can go back, you can go forward
between different routes, and your URL is always going to change and is going to map whatever
route you're currently on. But in some cases, that behavior is not what the application needs. And
in that case, you have more options of different routers. You have createMemoryRouter, you have
createHashRouter, createStaticRouter. All of these serve different purposes. And if you want to use
any of them, click here, go at the documentation, and see what use cases they are made for. Also,
it's important to keep in mind that these routers here are the only ones that let you access the
new data APIs. Stuff like loaders, actions, and stuff like that are only accessible using this API
right here. However, you can also create routers using the old way, using these router components
right here, and declaring your routes in JSX. This is actually the old way of doing things. And if
you've ever seen React Router previously, probably you've seen it like this. You create a browser
router, and then you declare your routes inside of this routes component. And for each route,
you render a route component with the path and so on. In this video, however, we're not going to be
doing it this way. And we're instead going to use the create browser router, as I've just showed.
This is the recommended way. And then we also get access to the new data APIs. Cool. So with that
being said, we can now come back to our code and continue our implementation of React Router. The
next step for us to do is to replace this homepage component here that is currently hardcoded to
render that component with a router so that we can defer the actual rendering of our components
to React Router. And for that, we're going to need to import the router provider a component from
React Router DOM and plug it into our app. So we're going to come here and do router provider
and import this directly. And then we are going to replace this homepage with router provider, and
we're going to pass it a router like so. What this is going to do is that now we've deferred the
entry point to our application to React Router. And using this router here, which we're going to
configure in just a moment, we can actually define what components get rendered at each specific
path. And also, by the way, this router provider component is built using the context API from
React, which if you're not familiar with context and how it works in React, I do have a whole
tutorial video on React context that you can watch to get yourself up to speed. So then the
next step for us to do is to actually create a route in a router. And we're first going to start
with the homepage. So I'm going to come here, I'm going to create an object for a route, and
I'm going to give it two properties. The first one is going to be path. And that one is going to be
like this, the index. And then we're going to give it element, and we're going to do homepage like
this. With this, now, whenever we are on the index path of our application, React Router is going to
render the homepage component. And I can actually check to make sure that this is the case. I can go
back to my application, we can go here to our app, and then we can reload. And as you can see in the
URL, we are on the index page, and we're rendering the homepage component. Let's now do the same
thing for the profiles page component, the page that is going to render all of the user profiles.
So I'm going to come here, create a new object, give it a path that is going to be slash profiles.
And then the element is going to be profiles page, and we're going to import this like this. Now, if
I go back to our application, I can go to my URL, and I can manually change this to profiles. And
with this, we are now on the profiles page. We validated that our router works as expected. Now,
here's something important that you have to keep in mind when working with React Router. Because
this is a URL, I can actually change and put anything I want in here. I can add an extra S. And
if I add an extra S, now we're going to go to a root, to a URL that does not map to any component.
If I press Enter, we get here an error message. And ideally, you actually want to implement your
own error element or your error boundary to show something different in case you have a 404 page
just to make it a better user experience for users. And the way that you do that is you come
back here to where you have your router defined. And below element, you can add an error element.
So we're going to do error element. And for now, we're going to do 404 not found in a simple div.
Now, if I go back to the application, we're going to see that we have 404 not found. This is our own
custom component. I can put any path in here that I want, and it's always going to render this 404
not found, which is a better user experience. Now, this is great, but we can actually take this
one step further. We can further improve the user experience by adding a button here that
can send the user back to home, back to a page that is found. Because if a user gets to this
page, we can actually consider them as lost, right? They're not supposed to be here. But
currently, we're not offering any way for them to find their way back. So having a button here that
takes you back to the index page is a great way to solve that. So the way that we're going to do that
is we're going to come here and take all of this code that renders the not found page, and we're
going to turn it into another page component. So we're going to come here to our pages folder,
we're going to create a new page, we're going to call this one not found page.jsx. Then I'm going
to do here rjsfc, and it's going to create for me a component. We're going to do not found page. And
then for the actual thing that we're rendering, well, it's going to be the same thing here. I'm
just going to take this whole thing like this, remove it, come here to not found page, and paste
it like so and save. Then we can go back to main and actually put the not found page here. So we're
going to do not found page, and then render it like so. And now we've converted our custom code
into a custom page component. And here in this component is where we're going to implement our
link back to the homepage. Now in React Router, there's a specific way to handle links. You
don't use an a tag, an anchor tag directly, you actually use the link component. So let's come
here at the top and let's import link from React Router DOM. And actually, I'm going to show you
the differences between link and a normal anchor tag. So we're going to come here and we're going
to do two things. First, I'll let Copilot be very helpful. Yes, this is the way that you create
a link using React Router, you create the link component, I mean, you use the link component, and
then you give it a to property. And this is going to be the path that you want to actually redirect
to. And then right below, I'm going to do the same thing, but now with a normal a tag. So I'll come
here, I'll do a and then href home, and then we're going to put home as well here. And actually,
let's put from a, and then here we're going to put from link. And actually, let's put like this.
And also what we can do is we can add a class name here, we can do flex, flex call, and we can do gap
to. This is going to give us some basic styles. Now, if I go back here, we have our updates, we
have 404 not found from our custom component. And then we have a link here, home from link, and
then home from a. If I open up the console here, and I actually inspect both of these, you're
going to see that this is an a tag right here, if you can see it, this home from link is
an a tag, an anchor tag, but so is this one, home from a, they're both anchor tags. So what's
the difference? The difference is that this link, this native anchor tag that we have here, is
actually going to perform a whole refresh before showing you the new page. This is how links
work natively in browsers. You click a link, it opens up a new page, but it does a full
page refresh, and it requests the whole HTML and JavaScript all over again, compared to this
a tag, which comes from the link component from React router. This is not going to refresh the
page at all. And this is actually going to perform client side routing. It's going to navigate the
page using JavaScript and JavaScript only without refreshing the page.And you can actually see this
if you click both of these links. So let me first go to my network and actually slow down my network
so that you can actually see what's going on. I'm going to click home from A and you're going
to see that the browser reloads. Everything is fetched again from scratch. Then if I go back
and I click home from link, you actually see that the transition was instantaneous and we did not
refresh and we didn't load any extra data. This is what React Router does. It does client-side
routing that is JavaScript only and it provides a much better user experience. So now with this,
we're actually done with the not found page. We can maybe just remove this A tag here so that
we don't allow our users to click it and we can just leave this link from React Router.
We can close this page and now we can start to deal with the actual profiles page and seeing
an individual profile. So the first thing that I want to do is I actually want to render out some
links for the profiles page because currently, the profiles page only shows this. So I'm going
to remove all of this here and instead, I'm going to use these profiles and map over them and render
a link for each single profile. So we're going to come here and do profiles.map profile and we are
going to return a key that's going to be profile and then href profile. And let's see what is wrong
here. We don't have this. And there we go. Now for each profile, we're just rendering an A tag.
And actually, this should be a link tag because we want to have client-side navigation. So we're
going to render a link and instead of href, this is going to be two. And each profile is basically
going to link to slash profiles. And then we're going to put the actual ID of the profile in the
URL. And actually, I just realized that we have to actually put something in the link, we have
to give it some text. So we're going to do here, profile, profile, and, and we're going to close
the link like so. Now we would actually be able to see something on that profile. Then if we go
back to our application, and we now change the URL to profiles, we now see all of our profiles
right here, which is great. Maybe we want to come here and just do something like class name,
flex, flex call, and then gap two, just so we have better styles. And there we go. This looks
a lot better. So now we have five profiles, five different links. But if I click any link, we're
actually sent to the 404 not found page, because we haven't yet implemented the single individual
profile route in our app. So let's implement it. Let's come back to our code. And let's come here
to main.tsx. Here, we have to create a new route, and this time for the profile page of a specific
profile. So I'm going to come here, I'm going to make path. And now for the path, we have to ask
ourselves the question, what path do we actually want to do, we know that it's going to have to be
slash profiles. But how do we actually get if you see here in the URL, we have slash profiles slash
one, this is a dynamic parameter that can change for a specific profile. And in React router,
there's actually a way to implement dynamic paths to put some sort of property in a URL that
can change based on the specific entity. And as you can see here, copilot already knows exactly
what I'm going to do. The way they do that is you do this, you do slash for a different part of the
URL, and then you put colon, and then the actual property here. And what we're going to do instead
of ID, because you can name this any word that you want, we're going to do profile ID, because this
makes it just a little bit more clear. What this is going to do is it's going to tell React router
that this URL has a dynamic parameter. And this part can be different, it can change, it can be
one, it can be two, it can be three, it can be A, B, and C, or it can be anything, this is dynamic.
And anything that matches this pattern here is going to render out the actual element, which in
our case is going to be the what is it the profile page singular, like so. So now with this, if we go
back to our application, we actually see profile page being rendered on slash profiles, slash one,
if I go back to where we were before, we have profile 2345, I can click any of these profiles.
And it all puts me to profile page, you can see here, it's two, if I go back, I click three in the
URL, it's three, all of these match the profile page, because that's what this means. That's
what this path here means it can be anything, I can go back to the application. And I can change
this to a for example, and it will still work, I can put here any random characters, and it is
still going to render the profiles page. Now, if you're observant, you'll actually notice
that there's something missing in this page, this profile page, this component doesn't have
context is not aware of the actual profile ID that is currently rendering, I can change this
to anything, and nothing is actually changing on the page, what we need to do is we need to make
this component aware of this parameter right here, because in a real world application, if you have
a profile page, you want to know the profile ID, because you're going to want to use it inside
of this component, maybe to fetch the actual profile data of that specific user. And in React
Router, the way that you access these parameters right here is actually quite simple, you make use
of the use params custom book. So we're going to come here, import, use params from React Router.
And then we're just going to do use params, call it like so. And this, this use params is going
to return you all of the parameters available of this specific page. So what I can do is I can come
here, I can do const params. And then I can just console dot log params to see what we actually
get. If I go back to the application, and I open up the console here so that we can see we have an
object. And here we have profile ID. And then one, if I change this to two, we get profile ID to if
I change this to any sort of characters, we get profile ID, all of this gibberish. By using use
params, we've now given profile page context of the parameters that are available to this route.
So now what we can do is we can get rid of this console log. And we can just do here params dot
and this was profile ID. If you close this, now we go back here and the profile ID is actually shown
in the UI, I can go back here to one, and we're now seeing profile page one, I can go back here
to two, and we're seeing profile page two, you get the idea. Now, if you're working in TypeScript,
which we are in this video, I'm going to give you a very useful tip. As it stands currently,
these parameters are not defined, we don't actually know what properties we have in here.
To fix this, what we can do is we can actually give use params a type, we can come here, and we
can put these angle brackets here, and we can give it the type of parameters. For example, we can
do profile ID. And then we can do this string. Now profile ID is actually going to be typed.
And if I do here params, and then do period, it's going to know that we're expecting a profile
ID. This is very useful in the case where you know what parameters you're actually expecting in this
component, you can just give it a type here. And then you have automatic type completion in this
component. If you're not working in TypeScript, that's totally fine, just skip this step. It's
a small step anyways. So now if we go back to all of our profiles page, and actually, I think
it's easier to just go here to slash profiles, I can click profile one, I have here profile page
one, I can click profile to profile page two. And I can do this for all of our profiles. And it
works as expected. Now there's one more feature about direct router that I want to show you that
you're probably going to want to use in your applications. The way it stands currently, every
time we navigate from this slash profiles page to an individual profile, we're actually rendering
all of the profile and we're losing the context of this page, right? Because it is a whole different
page. But sometimes in a real world application, you might want to keep all of these profiles here.
And when you click one of them, you actually only see the profile on this side of the screen, this
remains here on the left. And in React router, the way that we can achieve this is by creating a
child route, what we have to do is we have to make this component here, this route, the slash profile
slash profile ID, a child of this route. This way, this route is always going to be visible on this
path. And then when we navigate to a specific profile, it's still going to be visible here on
the left. And we're also going to see this on the right. So going back to our code, we can come
here to main.tsx. And the only thing that we have to do is just take this path here, the individual
profile page and move it inside of the children property of this route right here, we can paste it
here. This children property allows you to specify some routes that are children of this route, which
means that they're going to be rendered exactly as I've said. Now, if you go to the application,
you can click profile one, this route is still visible. The URL here at the top changes were
on slash profile slash one, we're actually not seeing the individual profile, I can click to
the URL changes to do, but we're not seeing the actual profile, what's going on? Well, the reason
for that is if you actually go to profiles page that renders all of the different profiles, we
haven't told React router where it should render its children routes, React router needs to know
how you want to display a child route in terms of its styling to be able to actually display
it. If we didn't display it, if we didn't tell it how to do it, it's just not going to render,
it's going to show us the actual parent route, but it's not going to render the child route
because we haven't told it how it should do so. So what we have to do is we have to come here
in our imports and import another component, this is going to be the outlet component. And this
component will act as a placeholder for any child route in this component, we can just put outlet
here like this. And then this is now going to be the placeholder, any child route of this component
is going to be rendered as this component as this outlet component. So now going back to the
application, we actually see all of these profiles here.And we also see profile page three, I can go
to one, I see profile page one, I can go to four, I see profile page four. Now the actual child root
is being rendered through the outlet component. And now what we can do, we can actually come here,
create a new div, wrap all of these profiles in its own div, and then take all of the styles here,
like so, because these styles belong only to this. And here we can do class name flex. And we're just
going to leave that so gap maybe two. And now this looks a lot more proper, we have them side by
side, profile page two goes to profile page two, three to three, and so on. And now there's one
more thing that I want to show you. And this is the last thing for this tutorial. Currently,
we have child roots, right, we have profile two, three, four, and so on. And we're rendering the
actual individual profiles here. But besides the URL, we actually have no way to know which page
we're currently on, it will be very helpful if one of these links is highlighted if we're
on that specific profile. So in this case, we're on profile page four, this link should be
highlighted. And we can actually do that quite simply in React router by simply replacing this
link component here with another component called nav link. So I'm going to actually replace all of
these with nav link. And now as you're going to see, this works exactly in the same way it takes
the same props. However, now these are not links, they still work exactly in the same way. But now
we can actually configure this to check the actual URL. And if it's active, if this link is currently
the active link, it can have a different style. So we can actually come back here and we can give
this nav link a class name. So we're going to do class name. And that is going to be equal to a
function that can take in an is active property, and we'll return some values here. And here
we're going to do return is active question mark, text primary. And we're going to give here 700.
Otherwise, we're going to return an empty string. And now if I go back to the application, profiling
one is highlighted in a different color, I can click to now this one is highlighted, I can click
three, it's highlighted, all of the active links are going to be highlighted in a different color,
which makes for a better user experience. Now, before we end this video, I do want to mention
that there's a lot of things that I did not go over in this tutorial about React router. And for
that, I would actually recommend that you go to React router, the documentation, and you follow
this tutorial right here. This one goes into a lot more detail on all of the different things
that you can do with React router. For example, we did not look at loading data, right, you can
actually load data directly through React router, if you want to, you don't have to. And you can do
it with a loader, you can create a loader function here, you can pass it here as the loader. And this
will actually load this data and make it available to your component using use loader data, you can
also do actions editing data, right, you can come here to data rights, and you can look at all of
this code, you can create here an action. And then you can pass this action in a form. And then
you can pass it here as the action to this browser router. By the way, the only reason that this is
available is because we're using browser router, which is what I mentioned at the beginning of
this video, there's a lot more things in here that I did not cover, because they are a little
bit more advanced, I wanted to keep this video quite simple, and only cover the things that I
covered. But yeah, with this, you have everything that you need to get started with React router,
and to implement your own routing solution in your React applications. If you enjoyed this video,
and you want to see more videos just like these, be sure to leave this video a big thumbs up.
You can also click here to subscribe. Or you can click here to watch a different video of
mine that YouTube seems to think that you're going to enjoy. And with that being said, my
name has been Darius Cosden. This is Cosden Solutions. Thank you so much for watching, and
I will see you in the next video. Ciao. Ciao.
