All right, and once we have the basic setup in place in this video, let's take a look at how we can
add the shared layout, essentially a layout that all of these nested pages will share.
And second, how we can set up the index because at the moment.
You'll notice that once we navigate from the register or login, since we're sending back the user to
the homepage, actually user goes back to a no man's land because there is no page for the home page
at the moment.
And we have stats on job.
And you can read the rest.
Now, as far as the set up in a React router, six, it's power for shared loud first where we have
the parent.
So in our case, that is forward slash.
I know I keep repeating this, but this URL could be anything worse like dashboard for its product and
you get the gist.
We want to set up element, and none of this will be our shared layout and then in that component.
We want to import outlet component from reactor power down Mt..
Also import link because temporarily, I'll set up the navar just so you can see how it works.
But keep in mind that we'll have different setup, so we'll have our sidebars and bars in separate components.
Therefore, again, this is just temporary.
And then we want to render this outlet.
Now I also right away grabbed the wrapper from the wrappers just so I have a little bit of styling.
And then we just need to come up with whatever our structure is going to be.
So in my case, temporarily, I'll add the name bar on top of all my purchase here, but you can set
it up however you want.
So, for example, if you want to set up the footer, you can definitely do so.
So let's get cracking.
And first, we want to do is in the jazz.
We want to set up that element for our parent.
So I'm going to go with element and then we're looking for shared layout.
So that's step number one.
Then we want to navigate to the shared layout.
So I want to go to share layout in the dashboard and then in here, instead of returning a div, let's
import the outlet as well as the link, which again is going to be temporary.
So not the outlet, just the link.
So let me grab the link as well, and let's take that wrapper import.
We're looking for a wrapper and now we want to go to our assets, which is going to be two levels up
and running here.
Let's look for wrappers and more specifically shared layout.
And then as far as the return, like I said, we're going to go here with a wrapper and then we just
need to decide what is going to be our structure.
So my temporary structure is going to be following where I'll have now with few links and then the same
works here.
So we need to have a to prop and where we want to navigate now for time being.
I'm just going to go with add job and learn all jobs.
We don't need to set up all the links again.
This will be temporary.
So hard job.
Now let me set it up.
This one, a new line just so I can copy and paste, and then I'm looking for all jobs and then the
same goes for it next.
And then below the knife, I need to go with my outlook.
So that's where those nested pages will be displayed.
We save it over here.
And if I navigate to my local host 3000, I can see that I have the error because it went with automatic
import and this should be React router Dom.
So let me say it and check it out.
Now I have my number and I have Job-rich correct.
So if I click on all jobs notice now I have this bridge and what that means that eventually we will
have the structure.
So the only thing that's missing right now are the proper components.
So we don't have yet the sidebars, the numbers and all that, but we do have a nice structure.
So all of these pages will be rendered inside of that shared layout and then we can add some stuff that
will be repeated all throughout those nested pages.
And lastly, let's also add that index wrap because at the moment, if I go to my application and yes,
I need to remove that, otherwise I'll navigate away.
So if I'm going to go over here and if I also register and if I log in correctly, so let's say I'm
going to go to John and the famous secret.
Everything is correct.
I navigate to my page.
What do I see or hear?
I have ajob and all dropped.
Why?
Well, because that's my shared layout.
But I actually want to display the page there, and we have two options technically actually in the
register.
I could go to the stats.
Why?
Well, because it is one of the pages that I have.
And then let's imagine that that's the first page that I want to display.
So I still want to stress something where this is my preference to showcase stats as a first one.
You don't have to if you want to go with different one.
That's totally an option.
In my case, I made a decision that the stats will be the first page I display, and that's why it is
my index page.
So yes, we could technically and register pass in forward slash and then start, and technically it's
going to work, but we'll still have this problem.
Where if at some point user goes to a forward slash, meaning our home page, we just display there
in that part, how we can fix that.
Well, where I have the stats or any other page for that matter, instead of path problem, I'm going
to go with index.
And as a result, what you'll notice that once you navigate to the actual home page, now I'll have
the stats page.
So hopefully this is clear.
And let me just stress one more time that whatever the value for URL is going to be, that's going to
be the relative path.
So if we change this around and set this up as a dashboard, then of course, index will also reference
that dashboard instead of homepage.
It's just in this setup.
I went with home page and therefore all of them are relative to the home page and index matches exactly
what I have here.
So indexed will be my homepage.
And as far as the element, well, that is going to be the stats one.
So that's how we can set up nested page structure in React rather.