Okay, so now we're going to implement React router dom and we need to install it in the front end.
So I'm going to just stop the dev server real quick, make sure that you're in the front end and let's
run NPM install react dash router dash dom.
Now we're using version I think it's 6.8.
Let's actually check that.
So in the front end Package.json.
Let's see.
React router dom.
We're using version 610.
In version six four.
They added they made some changes, added some things we're not going to be using like loaders or any
of the real new stuff.
I want to keep this really, really simple.
All right.
So we're not going to do anything crazy.
So let's run the server again and we're going to actually put our routes in the Index.js file.
I want to kind of keep clear that the app.js so I don't want a bunch of routes.
We have a lot of routes like a lot.
So I'm going to go under where we have our react Dom and let's say import and it's going to be from
React Dash router dom And there's a few things that we need to bring in first is going to be create,
create browser router.
Then we want create.
Roots from elements and then root and then we need our provider.
So it's router.
Router provider.
All right.
And then we want to add down here our router.
So let's say const router, we're going to set that to create browser router and what that's going to
have.
What that's going to have inside of it is this create routes from elements and inside that is where
we create our routes using the route component.
So we're going to do that and close it.
Okay, So this has the path of slash, which is basically going to be what is going to be like the parent.
And that takes in an element of our entire app.
Now inside of that is where we create our routes for like the home screen cart screen, all that stuff.
And later on, we're going to have protected routes for routes like, like profile and things like that
where public the public shouldn't be able to go unless they're logged in.
So the path for this is going to be slash.
However, we do want to say that index equals true here.
If we don't do that, we might have issues where it will show multiple screens at once.
So we want to make sure that if we're on just slash then and that's the index, then we want to show
the home screen.
Now we want to use the provider that we brought in.
And in the past, what we did is we would wrap this app component.
We'd wrap it in the provider.
Well, since we're providing the app component here, we don't actually need to wrap this.
We need to replace it with the router provider and then we pass in the router as a prop.
Did I bring this in correctly?
Uh, what's the problem here?
Rope is no corresponding.
Oh, we need a closing tag.
All right.
So that should work.
Now, if I save, we're going to get an issue because home screen is not defined.
And the reason for that is because I didn't bring it in to the index.js.
So basically, whatever screen we want to bring in or whatever we want to create a route to, we have
to bring in.
So let's pass that in.
Now this we're still not using the router, we're just seeing the home screen because I still have it
embedded in the app.js.
So we actually want to fix that by bringing in the outlet from React router so we can get rid of the
home screen in bed and the import because now we're importing it into Index.js where our router is.
But we do need to import the outlet, which is just that it's the outlet for the router.
So we want to bring that in and then we're just going to put where we had home screen, we're going
to put the outlet.
So if we save, we should get pretty much the same thing, right?
We're still seeing the home screen because we're on that on that route.
And I'm just going to move the outlet up up above the component here.
So right now we have some links, right?
We have a link on that.
Now you see how we got the little spinner in the in the in the tab here.
That's because we used an A tag and none of these routes are going to work right now.
But we don't want to use an A tag because we don't want it to load it like a regular page.
All of our routes are client side JavaScript.
So let's go to the products component and we're going to import here, let's say import link from React
router Dom and wherever we have an A RF, we're going to replace that with Link and instead of RF,
we're going to use the to prop.
Now if you're using Next.js and you use the link with with next, then it's still RF.
So that kind of I get confused with that.
So you might see me still use RF and screw up.
I do that pretty often, but we're going to change this one to so link and that's going to that's going
to be two okay and these should still now go to those two those routes.
But notice that in the in the little tab here there's no like spinner because it's not actually loading
a new route or a new page.
Now, we want to also do this with the NAV or in the header here, but it's a little different because
we're not just using an A tag, right?
For instance, with the brand, we're using this nav bar brand and putting the href on that.
So we can't just put a link around it.
What we're going to do is use a separate, a separate package called React router bootstrap.
So let's just stop the server and make sure you're in your front end and let's say NPM install, react,
dash, router, dash bootstrap and this will help us be able to to have client side links within NAV
links.
Okay.
We'll go ahead and run this again.
And now what we can do.
Is, let's see, we're going to import.
Let's say, import, and we're going to bring in the link container.
So link container from React router bootstrap.
And then what we have to do is wherever we have an RF, we're going to get rid of that.
So on the brand here, we'll get rid of the RF and then we're just going to simply wrap this in a link
container, the whole NAV bar brand just like that.
And the link container has two uses too.
And then we're going to come down here and we're going to do the same thing with.
With the nav links.
So let's get rid of the ref cart and then we'll go above it and we'll have a link container to cart
and then we're going to wrap the nav link.
Same thing here.
Link container to login and we're going to wrap that.
Now we should be able to go to Cart and see how quick it is.
And there's no there's no spinner or anything like that.
All right, so we have the router implemented.
Now, what I want to do before we move on to anything else, I want to add the rating component to our
products because it's going to have a little star rating.
So we're going to get into that in the next video.