Great ones who are familiar with our star project.
Let's kick things into gear by setting up our routing.
Now, our page routing is going to be a bit specific.
Since we're not going to have a traditional nav bar with all the links and then the user can just navigate
from patient page by clicking on those links.
Since we're using authentication, but nevertheless, we need some kind of routing so we can display
different pages, one for dashboard logging.
And of course, the error page forward at our weapon of choice is going to be arguably most popular.
React routing library out there by the name of React Router Dom.
If you want to learn more about library, feel free to follow link that I provided in Orien Me.
But of course I'm going to cover Step-By-Step.
Everything we will need to know in order to set up our project.
Just keep in mind that for this project we are using version 5.2.
So if the docs are a bit different by the time you're watching this while they have new version.
So if you are starting some new project from scratch and install the latest version, syntax might be
different.
With that said, how does a react router dom work?
Well, if we navigate to address the moment, we can see that we have three pages.
We have a dashboard page.
We have log in page and we have the Arrow Bridge.
Granted, there is not much in those pages, but at least we can see all the pages.
However, our goal is following where we would want to have a dashboard page.
Now, if the user navigates to some kind of page that doesn't exist, for example, that would be hello.
You'll notice that we'll kick the user to a page and now he or she has an option of returning to our
homepage.
So we click back home.
And of course, we navigate back home.
So this is going to be our home bridge where we have the dashboard.
Now, we also have an option of locking out the user and then we kick back the user to a logging page.
So from this page, now the user needs to log in and line once he or she logs.
And then, of course, we display the dashboard again and want to set up a react router.
We need three things.
We need a browser router, which usually is given an alias of router and switch, as well as the root
components.
And what we would want to do is wrap our components in the router.
So let me remove this one and I'm just gonna type here router and then if would want to display a separate
route.
We would need to use a raw out component.
Now, I'm going to talk about the error because it's a little bit different in the next video.
So for the time being, which is going to remove it.
But don't worry, we'll add it back in the next video.
But set up our basic Kraut's.
We simply need to have our gear out component and line within that Tharaud component.
We need to display which our component we would want to render.
So in this case, I would want to render Dashboard and I'm going to do the same thing for the Log-in,
since these are the two pages that I'm using.
So notice.
I have my component rod component and then within that rod component.
I'm placing the component that I would want to render.
Now, we're not done, though, because if we save course, we still render both.
We have dashboard page and the log in page.
So in order to set up separate pages, we would need to add the path.
So essentially, we're telling the reactor, our dome, where we would want to navigate.
And remember when I said that the dashboard is going to be a home bridge.
So for the home page, the route is going to be falling.
And it's gonna be forward slash.
Now, the properties we're looking for is path.
And then as far as the value for the home bridge, we just have a forward slash.
So this just means our domain.
So whatever our domain is, that is our homepage online for the logging.
You'll notice that in the URL we have the domain forward slash logging.
So the same thing.
We have a path prop and then we'll just pass in for its Lasch logging.
Now again, you're going to right here, grandma, dear.
It doesn't matter.
It's just this place in the euro.
Once you navigate to that page.
So, for example, if I log out.
Notice how I kick back my user to a log in page.
Notice the domain.
And then forward slash logging.
So essentially you can write here wherever you'd want.
It's the component that is important.
So if you have the you are all of logging, then of course, if you place here a logging component,
while that is going to be the component that is displayed.
So once we served notice, now we're displaying the home page only.
Correct.
Because we said that we have a rock component and line for the path, which is our domain.
We will display as a homepage our dashboard component, which essentially is our page.
Now, if we navigate to a logging.
And let me see your man and he?
S in this case, we'll have to do a bit of navigating around in your albar because like I said, we're
not going to have a traditional bar.
So sorry for your little inconvenience, but that's just how it's gonna be.
And in here, let me type log in and now you'll notice something interesting where I am displaying the
log in page one.
I'm also displaying a dashboard page.
So what's up with that?
Well, if we're looking at our path.
Notice all the homepage actually matches the log in as well.
And in order to fix that, we just simply need to add another prop.
And the name of this prop is exact.
And here what we're saying is that only navigate to the home page to forward slash if it is the exact
YORO, not if it matches something in the log in as well.
And once you say if you'll notice that if we navigate you forward such logging, then of course we are
displaying the log in page.
Or if we go back to a homepage, we are displaying a dashboard page.
So three things.
We need the router.
We need a route and line path for every component we would want to display whether that is going to
be homepage where we are displaying dashboard or log in page, where we're going to be displaying a
log in component.
And of course, also the exact prop set to true.
Now, if you want, you can add also exact true to a logging, for example, if you would have some
more nested droughts.
But in our case, of course, we don't have that.
That's why I'll skip it.
So this should be our basic setup.
And now we can talk about the error page.