So far, all our examples were in the same page, even though it works for our editorial when it comes
to real apps.
It's nice to have multiple pages, not one.
We talk about a JavaScript frameworks.
We are not talking about traditional HMO pages.
In that case, we have a new term, a single page application, which just means that we have our one
page in this case where we have there with an idea of root.
Instead of going back to a server and requesting info about the pages where the user navigates, we
set up a routing on the client side without the page refreshers.
To give you a visual example, navigate to IMGs and then import as always.
You can call it whatever you like.
My case, I'm going to go with Final, of course, from online.
We're looking into Turrill, then we're looking at the folder number 11 and the final folder.
So here where we have the advanced react in this case, I'm just going to add my final component to
give you a good understanding of what we're going to create.
So notice here how we have the number and then we have three links and check out the URL bar, as well
as this refresh icon where notice as I'm going from one page to another one, I'm switching the URL,
but we're not doing a full page refresh.
So each and every time we navigate to about or people or home, we're not going to a server and fetching
the data and then coming back is that all of this is happening on the client side.
And of course, this is what we're going to create in the following windows.
Now, when it comes to react, it does not have built in routing and we'll need to use an external package
for that and the most popular routing library and reaction is by far the react router.
But let me be very clear.
It's not part of the official react, even though it might seem so because of its popularity, it is
still an external package.
If you check the folder for your computer, you will find a markdown file with more info.
So what I would want right now is to remove my example.
Hopefully you can see what we're going to create and then navigate to react router folder.
And then you're looking for react router info marked on file.
And here you'll find a link to official docs just so you can see where I'm getting the information from.
And also keep in mind that for your own project, you'll have to install the react or order down first.
And you do that by running NPM install, react, router down.
Now, of course, I already installed this.
So if you go to a package JSON, if you check out the packages, you'll see that there is react router
dom and more specifically the version of five point you.
Now just to showcase how we would install the package, I'll stop their server and then again we'll
run and RPM and remember what was the command npm install and react router and then so that's what you
need to do in your own project.
You install the dependency and then it's going to get added to the package JSON and then of course you
can start using it because you'll see that there's going to be some import in the upcoming videos.
Now let me start up the server again.
So we go Head Start.
And the last thing that I would want to mention as far as the react router general info is the version
number.
It is safe to say that you'll be watching this in the future.
And just like any other software, of course, there's going to be some updates.
So if you're watching this and if you install it and you can see that the version number is already,
for example, six, then of course you'll have to go to docs and see what are the changes, if there
are any.
And most likely there will be as far as the syntax.
So the syntax that we're about to cover is for version five.
Keep that in mind.
Once they switch to a different version, it's a good chance of that.
Also, some syntax will change as well.
Now, you'll still be able to use this syntax if you go with this specific version, but if you want
to use a newer version.
If it is available already at the time, then, of course, you have to go to a doctor and make sure
that you follow the proper syntax that relates to that specific version.