And once we have imported our pages now we're going to start setting up our rover and the way it works
in react Rover down whatever page you'd want to display in our router.
We would need to wrap it in the router so router essentially is going to wrap all around our application.
Now you can also do the same thing within the next year.
You could just import the browser router and then if you'd want to name it let's say you can use also
the same name router and then just wrap around the app.
However in our case we're just going to wrap it in our return.
So instead of returning the heading One we're going to return our router and then we're going to place
all the pages we would want to display in our application in that a router component.
So like I said instead of having one we're going to have our router component and then we're going to
place whatever pages we heard one.
And we're gonna start very simply by displaying the home about as well as let's say a card.
Because I would want to talk about the exact prop first and the way it works in the react router 5 instead
of setting up a route component.
And by the way I'm saying this because maybe some of you have work with react router for where when
we were setting up the route in fact in order to show the component we use the prop and I believe the
prop name was component.
However in react a router down 5 what we're doing is we're using this route component to wrap around
whatever page you want to display.
So let's say if I would want to display the home page I'm first going to have my root components or
not router a component but what component.
And then within the real component I'm going to say what page I would want to display.
So in my case I'm gonna go home again in the previous version.
You did something like this where you had a route and then you had a component that was equal to whatever
component you would want to display in this case.
We still have the path parameter so we're still saying whatever the path is going to be for this particular
component.
But instead of placing it here within the prop of component we're placing within the actual component.
So that's the reason where we have the path.
And then for the home page we're going to have just forward slash that means whatever domain we have
currently of course that would be let's say a local host 3000.
But in general that could be any domain you have.
And then we would want to display the homepage and now we're going to copy and paste it and we're going
to do the same thing for the about as well as card.
So let me select my route copy and paste it two times first I guess.
Let's change the components let's say about and then also I'm going to have one for let's say car.
And of course we also need to change the parts.
Now the URLs can be whatever you'd want.
So if you'd want to write a different you URL for the about page well you can definitely do it.
But of course it makes a bit more sense that if you have the about page well then the name in the URL
is also going to match.
So in this case if the user navigates the forward slash about it then we're going to display the above
page.
And lastly we're going to do the same thing with the car.
Now let me save it and you're going to notice something interesting that if let's say we're in a homepage.
Everything is correct.
We're just going to display the homepage.
And again the reason why we see this heading one from hello from homepage well because that's the content
we have currently within the homepage.
Obviously later on we're going to have more.
But currently that's all we have.
But if let's say we're going to navigate to a boat Page Well there's going to be two things there's
going to be hello from home page and then also we're going to have hello from about page.
OK interesting.
Now let's do the same thing with a card and as a side note yes we're going to set up our NAV bar a bit
later.
That's the reason why we're going to have to do a bit of navigating in our Euro bar and let's do the
same thing and yes still we have hello from our bridge.
And then also we have right away Hello from garbage.
Now the cart page is correct but why do we have this homepage here.
Well let's think about it.
So we have the path right.
And then what is the path.
Well that is the forward slash.
Then I have the forward slash in about and then I have forward slash and cart.
And what happens is that this around the path actually matches because it says OK so where are you would
want to go forward slash.
And then in this case we're just adding the about.
So both of them match if we're heading over to a ball.
So in order to get rid of the home page when we're let's say navigating to a cart page or about page
we need to have this exact problem.
So on the root component we can set up a exact prop.
And that way we're only going to display that particular page if the path.
Exactly it's not just.
Okay.
So we have forward slash.
Okay fine I'm just going to render the page whatever has this forward slash and then if let's say we're
gonna have the card as well.
Well then I'm going to render both.
No in this case we're only checking for the exact match for our fourth.
So only if we have the forward slash then we're going to display the homepage.
If the route is different if the path is let's say about then we're going to display the about page
and the same would work with a cart page as well.
So that's how we can set up a very very basic router using react router Dom.