Okay.
Welcome to section four.
And in this section we're going to set up routing in our application.
So coming up in this section we're going to talk about why we need routing.
Well it's fairly obvious why we need routing because we only have a single page.
We're not going from one HTML page to another HTML page.
We need to swap components when our user browses to a different route using the URL or any links in
our application.
And we're going to look at setting up React Router to do that.
It's kind of like the de facto routing solution for react is React Router.
It's not made by react.
It is a third party thing that we're going to add here, but it is the one that most react applications
would go to when they need routing.
So Spars need routers.
For the reason I mentioned we only have a single page.
We don't have multiple different pages to route to, so we're not replacing one file with another file.
Here we're replacing one component with another component.
And we need something to manage that.
We don't always need a router.
We could do this using conditionals and track which page or which component we should load using states.
And that would be fine for a really small application.
But ours is going to be a bit bigger than that.
And we do need a routing solution.
And as mentioned, the de facto solution for lists is React Router.
It's pretty straightforward to use.
It is bigger now than just a routing solution.
But all we're going to use this for is for routing.
They do offer data fetching inside React Router.
Now we're not going to use it for that.
We're simply going to use it for what its original functionality was, which is routing.
We're going to use it for that and pretty straightforward to set up.
We create some routes and we just specify an array of routes with paths and which component we wish
to load when our URL is updated with a particular path in the browser.
Following that, we provide these routes to a router provider, which is provided to our entire application,
so we can use routing functionality from any component inside our app.
And then we provide an outlet component.
And the idea is that when a user browses to a new URL, react router matches it with one of the routes
that we provided, and then loads that component and the outlet is replaced with the component of react
router loads.
So that's the idea.
Pretty straightforward section.
Pretty short section in this training course this one.
And let's begin.