So we got data fetching, and data sending,
and this demo website, therefore, looks quite nice,
quite decent, and we learned a lot about React.
However, there's one last crucial feature missing
in this website, which I'd also like to explore together
with you, and that would be routing.
Now, what's routing?
Many React apps, I would say, almost all React apps,
at least, definitely if they are anything
but simple demo apps, might want to have routing
which simply means that you wanna support different paths
and load different pages, different components in the end,
for those different paths.
At the moment, our demo website here, only has one path.
No matter if I click new post or not, the path up there,
the URL always stays the same.
The disadvantage of this is that I, for example,
can't link users to this new post mode.
If I want to send a link to someone that allows them
to immediately create a new post,
I could try to copy this URL,
but if I paste it in and hit enter,
I end up on the starting page again
because this React app has no pages.
And that should generally make sense
because as mentioned before,
we're building a single page application with React,
so we have only one page, only one HTML file.
But the idea behind routing is
that we can still support multiple paths by simply listening
to URL changes whilst the app is running
or by evaluating the URL when it's first loaded,
and by then loading different components for different paths
that are encoded in the URL.
So that for our domain/nothing, we load the landing page,
for /products, we load the products page, and so on.
That's routing.
And even though React apps are SPAs, as you learned,
there is a solution for still getting this behavior.
And that's the React router package,
which is the most popular routing package for React
because React itself has no routing capabilities built in.
And whilst you could build your own solution
where you try to take a look at the URL, extract the path,
and load different components for different paths,
React Router is a powerful package
that solves all these problems for you,
and it offers tons of features related to routing.
Now, just as with all the other React parts,
I dive way deeper into React Router in my full course,
but we'll still get started with this super useful package
in this crash course here.
Now, React Router also has an official website where you,
of course, can also learn all about it.
And it's also worth mentioning
that there are different versions of this package.
And for example, version five is still quite popular,
but version six, for example, works quite differently
compared to version five, and therefore,
I also got separate videos where I explain what's new
in version six and also in 6.4 which also
added even more exciting features to React Router.
In this crash course, we're of course going to dive into
that latest version here.
And for that, we first of all,
have to quit our development server
here in the front-end application
and run npm install react-router-dom.
So not just react-router, but react-router-dom.
This package must be installed
and that gives us React Router
in this front-end application.
Now with that, we can add routing,
and what's really important to keep in mind is that we still
have a front-end application.
This routing happens on the client side,
not on some backend, but it does still enable us
to support different paths
and simply load different components
for those different paths.