All right.
And up next, let's talk about how we can set up nested routes in React router.
You see?
Our current setup is awesome, but what if we want to have a nav bar?
Well, you can make an argument that we can set up the components folder in there.
We can set up the navbar component, we can import in all the pages.
And all of that is good.
But what if I have more pages?
What if I have 15 pages?
What if I want to add the footer at the bottom?
As you can see, there has to be an easier and faster option.
And also in React router, the errors bubble up.
So once we set up the nested routes, we'll be able to add the error page for all of our pages.
Now I can tell it right away that this is somewhat tricky topic, so please don't rush.
Through this video.
And yes, I'll purposely do everything step by step.
So first thing we need to do is to decide which is going to be our parent route.
So at the moment we have these four routes and the one that makes the most sense is the home one.
Basically, home route is going to be parent for rest of the routes, the register login and the dashboard.
And as a side note, later on in the project, we'll set up a dashboard as a.
Parent as well.
So that is coming up.
And essentially, once we decide on the parent, here's what we want to do.
We'll keep the element for now, but we need to add the children prop and we need to set the children
prop equal again to an array.
And now these pages or whichever page you want to set up here as a child, you just want to.
Add as an object.
So this doesn't change the syntax.
So here's what we can do.
We can just cut it out from the Create browser router and set it up here in the children.
Now, once we do that, we need to understand that all of these URLs effectively are going to be relative
to the parent one.
So again, in our case the parent is the home page.
So in this case it's not going to make that much difference.
But once we do that for Dashboard, yes, you'll definitely see that in action.
So let's say if there is a child inside of the dashboard and the URL is stats, the URL is not going
to be our domain and then stats, it's going to be our domain.
So in our case localhost 5173 and then dashboard and then stats.
And again all of this is coming up.
So here's what we want to do.
We want to remove those forward slashes.
Again, this is going to be relative to whatever is the parent.
And since the parent is the home route, well, I mean, we remove the forward slash.
And again, this is going to be relative in this case.
Like I said, since our parent is the home route, it doesn't make that much difference.
And once we save, you'll notice something interesting where essentially if I navigate to a register,
I won't be able to see the content, I'll still see the home layout.
So this is the tricky part where again, there are multiple steps we need to take in order to get the
complete setup.
So now we have the parent, we also have children.
Now we want to go to a home layout and grab the outlet component because at the moment, if we'll navigate
to any of these pages like we just saw with Register, we'll see this home layout over here.
So let's navigate to a home layout.
And as I said, that's why I named this page Home layout, because technically, in my opinion, it's
more of a layout than the actual page.
So let's go over here and again we'll have to set up a div here because we'll have multiple elements
and we can return technically only one.
And inside of this div somewhere, anywhere in this div we're going to go with outlet.
So that's the component we want to grab from React router dom.
And here's the result.
Whatever content we have in the child pages is going to be displayed over here in the outlet.
Now, I do want to remove the semicolon over here and instead of the heading one, the home layout.
Well, let me just set it up as a navbar just to demonstrate the.
A result that we get.
And here I can just type nav bar once I save.
Notice as we navigate from page to page.
And of course, in this case we're just looking for register and login.
But also we can do that in the dashboard.
You'll notice this nav bar.
So this is what we're sharing.
All across the pages and whatever content we have inside of the actual page, whatever divs or elements
we're returning, that of course is going to be displayed here in the outlet.
And as you can see, whatever I place around this outlet is going to be displayed in all of the pages.
Now one last thing we need to fix if we at the moment navigate.
To the actual home page.
Notice we only display the nav bar.
So we have the home layout, but there's no actual page.
Which is displayed if we navigate to a home one.
Let's take a look at our app.
So notice we have the path.
We have the element.
And technically, yeah, when we go to the forward slash the home page, we display the home layout.
But inside of that home layout, we only have the nav bar.
This is for the children.
Correct.
So here's what we want to do.
We want to set up the index page for our parent as well.
And in order to do that, we'll first need to decide which is going to be our index page.
And technically, you can set up any of these pages as an index page, but in my case I will set up
the landing one as my index one.
So let me go to the children and the location here is irrelevant.
You can set it up as a first one, last one.
As long as you have the index, that's the one that controls it.
So we'll say here, index true.
And then comma and now what element we want to display.
Well now I want to go with the landing page.
Let's save and check it out.
Basically, this is going to be the page whenever we navigate to the forward slash, right?
So we'll have the home layout that stays.
This one pretty much has the outlet and all that, but the index one is going to be displayed when we
go to the parent route.
Hopefully that is clear.
And with this in place we have a setup for nested routes in React router Dom.
Again, we want to decide on the parent, we want to set up the children and if we want to display some
kind of page when we navigate to the parent route, we need to come up with the element in our case
landing and set index to true.
And all of them pretty much are going to be relative to the parent route.
And also, I just want to mention that technically we won't use this shared layout approach for the
home layout.
We'll actually implement it once we set up the dashboard page.
So this was here just for demonstration purposes.
Whatever elements you set around the outlet are going to be displayed in all children pages.