And in order to set up React router first we need to install it.
So if you want to set it up in your own project, you'll need to go with NPM I and then react router
dom in the Readme.
I left the specific version, but of course in your case you can just go with npm I and react router
dom.
And once you have the package in place, you'll want to navigate to your root component, which in our
case is app, JSX and set up create browser, router and root provider.
So let's do it together.
We're going to navigate to app js.
I'll close the sidebar just so we have more real estate and we're looking for create browser, router
and router provider and you're not.
In this case, I'll try to rely on the auto import.
So notice that's the function we're looking for and we want to set it up to some kind of variable.
In my case, I'm going to go with the router.
It's a function and inside of the function we pass in the array and then inside of the array.
Each and every route is going to be an object.
And we'll start with these two properties.
But of course eventually there's going to be more.
So we have path effectively this just controls what are we going to display once we navigate to a specific
URL?
And it's a common practice to go with forward slash, which means the domain.
So in our case it's localhost 5173 essentially that's my home page.
Now once we deploy it, of course that domain is going to be different.
But again, this forward slash means home page.
And what do we want to display?
Well, eventually, of course, we'll have the components and all that cool stuff.
For now, I can simply show you that we need to go with element property and I can provide here a heading
one.
So I'm going to go here with heading one and I'll just type home.
Let's save this and let's copy and paste.
And we're going to set up the second.
Route.
So in this case, I'm going to go to about Page and just to showcase that it's possible, of course,
not only we can add a heading one, but we can go with Div and then maybe in there we'll place another
heading one again.
Sky's the limit.
Please keep in mind that our pages are components so effectively there's no difference.
So we have a typical react component and all of the pages are the same components.
The difference of course, is that we just display that component once we navigate to the specific URL.
In this case, it's going to be a home page and about page.
So if.
I want to display a content on forward slash about.
I just add here a path forward slash about and then whatever.
Element I want to display in this case.
It's going to be an about page in a div, so let's save.
And now we want to grab the router provider and return from App.
So instead of this heading one again, I'm going to rely on the auto import.
And the name of the component is router provider.
It has a router prop.
So that's a special prop that we have and we want to set it equal to what?
Well, to our router instance, let's close it, let's save.
And if everything is correct, we should have home.
Why?
Because this is our home page again.
This is localhost 5173.
And once we deploy, it's going to be our actual domain.
Now if I go to my URL bar type forward slash and then about what do you think we're going to display
of course the about page.
So with this in place, we're done with our most basic router and next we can start covering more complex
use cases.