All right.
And now let's set up the structure for the rest of the pages and since we will be setting a single page
application.
Arguably the most popular routing solution is by far React router, and right before I started recording
what's really cool?
They just released version six.
So we'll get to work with the latest goodies they have to offer now since it's a intermediate course.
My assumption is that you are already familiar with the React router basics.
Essentially, you have used one of the previous versions and therefore my main focus will be on the
new setup, not the general idea.
Also, if you want to find out more info on React router, you married me, you will find a link back
to Paradox, which I might utilize from time to time.
And first of all, we need to do is install these dependencies.
So let me stop my server now, and we're going to go with the command.
And this is the cool thing where now I can just copy and paste and install it, and then the setup is
pretty much the same where we want to import barrels and water.
And start it up here.
So let me go here with npm starts, so I'm restarting my server.
And like I said, setup is pretty much the same.
We're still looking for a browser router, which is going to connect to browsers URL, but instead of
Switch, we're using roots component.
So all of these are still components.
But instead of switch like we did in the version five, for example.
Now we're using A-roads component, and it really shines when we need to set up nested routing, which
we're going to do because in the dashboard, actually it will have pages.
So not only we're going to have the home page, which is going to be a dashboard, then register landing
and then the error page in the dashboard, there's going to be a nested page structure.
So there's going to be stats, all jobs.
And you can read the rest.
And when it comes to the routing, that's where your roots truly shines because it makes it very easy
to set it up.
And of course, there's also a root component.
So that's where we specifically say, Well, what is going to be the root for our page and link, which
we're going to use in an app now?
In our case, there's not going to be the main nav.
As you can see, we have register, we have landing page, but the nav will be actually in the dashboard.
So in the nested structure, that's when we all have the number, not the entire number for our application.
Hopefully, that makes sense.
And first thing that I want to do is navigate your app just so we have successfully already installed
React router, correct?
So we just need to go with import here and now we're looking for, like I said, the browser router
ran.
We want to get the root of the root component and also I want to get the link because even though there's
not going to be the main nav bar for our application, basically it's only going to be in a dashboard.
I still want to showcase how these links work and all that so temporary.
I also get the link component over here and we're looking for a React router dom for.
That's where we're importing.
I'm let's right away set it up, so we still want to wrap our app component.
So in here, we're still going to go with browser router.
Then we'll set up the URLs and the inside of the root.
This is where we want to set up route one by one.
So each route and then the props we're looking for are following.
So in this version, they're looking for path.
So that's going to be the URL path for navigate.
Get over here.
Notice again.
If I log out, this is going to be the URL and then forward slash and then landing correct again.
Domain and then land.
OK, now if I go to register, you can probably already guessed that it's going to be a domain.
And then forward slash register now if I navigate to a page that doesn't exist, for example, or registers,
then will display the Arrow page.
So let's set it up more in the app dress.
I'm going to go with a route and actually in this project dashboard will be my homepage.
Now there's many ways how we can set up.
This is not the only way, but this is the one that I went with.
So essentially, if the user is logged in, he or she right away goes to the dashboard, which is my
homepage.
But if the user is not logged in, then of course we transfer the user to a landing and then he or she
can make their way to a register.
So in here, I'm going to go with the Route one path.
And since my dashboard is going to be home page, I'm going to go with 4GB that signals the homepage
and then we need to provide the element.
Now Element could be pretty much anything, meaning we can provide the HTML right there in the element
or we can get the component.
So I'll show you we have manual approach where basically I'm just going to set up there right here in
the element prop.
And since we only have the landing one, that's the one we'll set up actually as a proper component.
So let's go here.
Let's say that this is going to be a dev.
And then inside of it, let's just type a dash board.
OK, so then I'll close my route.
Eventually, this is going to have a nested structure.
So for timing, I worry about it, but eventually it will place more pages inside of it.
But for now, we'll just leave it the way it is vulnerable copy and paste, and we want to set up four
of them total.
So this is going to be for a home page when we want to have one for register, and let's just change
this around.
Just say here, register.
Register online.
The last one, I think the era when I'll set it up by setting one.
Please keep in mind that again, you can set up whatever GSX you want or hear as long as it follows
the rules of GSX, of course.
And then in here, let's go with landing.
So that's for lining.
And this is the case where we actually provide the component that we created.
And of course, you can already guess that eventually that's going to be the case for all of them.
This is not how we're going to set up our thing.
So let's say you're landing on in this case, actually don't need to even provide anything.
I can just set up my landing and I can actually self-closing as well.
So let me set it up this way.
And on the landing one, of course, I'm not going to use it anymore, and I want to set up one for
the error page and the way we set it up for error page in the reactor out of six is following where
we go with Route Pleshette all the way on the bottom.
And here, since we want to catch all the routes that didn't match the previous ones, we're just going
to use a star and same deal.
We use some kind of element.
Now we'll start with just the day off.
But like I keep saying, eventually there's going to be more pages.
So for now, let's just change this around and let's say adding one, and we're going to be looking
for error.
Now we'll set up that temp knob, our next video.
For now, I'm just going to show you how the navigation is going to look like when we're using the URL
bar.
So let me go to the big screen.
I'm going to go with localhost 3000 now.
This is going to be my dashboard.
Why?
Well, because that's our home page, correct?
Now, if I'm going to go with forward slash and then if I type register what you know, now I see a
register.
Now, if I'm going to go here and if I'm going to type landing, you can probably already guess that
we'll have our proper page.
Awesome.
And then lastly, if I go to Landing's, which is not a page, and at the moment I have empty screen.
Hmm.
Weird.
So let me double check.
Yeah.
Of course I'm missing here, the star.
So let me remove and we need three other stars and I can see what happens if we don't do that.
And here we have properly error and we're pretty much done.
And before we start setting up for the temporary navigation just so you can see how the wind component
works, let me change back the image.
So at the moment, I'm using the alternative one, but I want to go with my main one.
So back in the landing set of alternative.
We're just going to remove and I'm back to my initial image.