In this video, let's configure our application to use React Router Dom.
So let's get going.
So back here this way we left.
So how can we configure using react router dom and here we go.
So inside the app, that is our entry point.
So we are going to implement the navigation inside the app.
So let's go ahead and then requires the methods we need.
So first is we are going to structure some methods because we don't need all of the methods that came
with React Router Dom.
So the first one that we need is what we call the browser router.
So this one is going to be what is called a high order function, meaning that we are going to wrap
our entire application inside this browser router.
Dom So for this one react router, don't behind the scene is going to inject all the methods and properties
into our component.
Apart from this one, we also need what is called root.
And lastly, it is going to be the root, the differences between root and then the root.
So this root is also a high order function where we are going to wrap our component inside.
This one is going to take the individual component to render to the page.
So here we go.
So let's remove all these ones from here.
And now let's have some fragment and here we go, or better so we can use the browser router.
So here has browser router as that.
In case this name is too long, we can rename using this syntax as and then the new name that is router.
But I prefer to use the browser router instead of this router.
The choice is yours.
Then the next step is that I need to wrap my route inside that and here we go.
So here we are going to call the root and then you pass in the component that you want to render.
So here that is the root.
And for this, it takes a couple of props.
The first one is a puff, meaning the you are where I want to go before I can see a certain component.
And for this one, let's say I want go to the home page.
So I need to render that component and get that one.
We use a prop core element and it's equal to and then carry braces.
So here we are going to use the component I want to render.
So let's go ahead and create one component for home page and here we go.
So let's create one and I'll call this one as home dot G's and let's go for the component and let me
add div and then the H one and our code is one as well.
Come home.
All right.
And let me ask some dummy text here as P and let me play some dummy text here.
Great.
So now I have home page components.
So here I have to pass in the component.
So I need to require the component code home.
Great.
So here, I'll pass in here as a component and pass in and as that's so let's go over again we pass
in the path meaning the you are I won't go.
So this means that if I visit slash home I'm going to render this component.
So let's save it.
And now let's get back to the page and you can see that.
I see.
Welcome home.
Great.
So the next step is what I want to render the rest of the component that is the contact and then the
about us.
So the same step I would bring in the about component.
So in case the auto import isn't working, let me show you one trick.
Go back to a component or the file, receive it and now back to the file where we want to import it.
So here would be about and now you can see that it's working now.
So let me come here and next case I'll make use of the round and the same process I'll pass in the path
for this I want to go to forward slash about and the component going to be equal to carry basis.
And my component which is about great, now let's save it and now let me check it out.
If I go to force slash about let's see a I see about as page how easy it is so you can post this video
and then try the contact us and then the add main page.
All right.
So let me show you how I'm going to do that one.
So here I want to render the contact.
So back here, I'll make it of contact.
And here we go.
I can copy this one and now paste it here and change this one to contact and this one to contact component.
So again, I want to copy this one and change this one to admin.
And here is going to be the admin component for this one.
The auto import is not working.
So let me reset again and now back here and admin page and it's working fine.
So let me try it from here and now I'll paste it here like that.
So now we have complete navigation.
So let me clear everything here and now let's check it out.
If I go to admin now I have admin page.
If I go to contact, I have contact page.
If I go to log in, I can see that this page is not found unless we handle that.
So in the next video, let's go ahead and then render a route that doesn't found and display a message
called or for meaning not found.