WEBVTT 00:00.000 --> 00:00.300 Okay. 00:00.300 --> 00:01.680 Welcome to section four. 00:01.680 --> 00:05.640 And in this section we're going to set up routing in our application. 00:05.640 --> 00:09.660 So coming up in this section we're going to talk about why we need routing. 00:09.660 --> 00:13.980 Well it's fairly obvious why we need routing because we only have a single page. 00:13.980 --> 00:17.370 We're not going from one HTML page to another HTML page. 00:17.370 --> 00:23.640 We need to swap components when our user browses to a different route using the URL or any links in 00:23.640 --> 00:24.840 our application. 00:24.840 --> 00:28.170 And we're going to look at setting up React Router to do that. 00:28.170 --> 00:32.970 It's kind of like the de facto routing solution for react is React Router. 00:33.000 --> 00:34.590 It's not made by react. 00:34.590 --> 00:40.380 It is a third party thing that we're going to add here, but it is the one that most react applications 00:40.380 --> 00:42.780 would go to when they need routing. 00:42.780 --> 00:44.520 So Spars need routers. 00:44.520 --> 00:47.310 For the reason I mentioned we only have a single page. 00:47.310 --> 00:52.830 We don't have multiple different pages to route to, so we're not replacing one file with another file. 00:52.830 --> 00:55.830 Here we're replacing one component with another component. 00:55.920 --> 00:58.380 And we need something to manage that. 00:58.410 --> 00:59.880 We don't always need a router. 00:59.880 --> 01:07.200 We could do this using conditionals and track which page or which component we should load using states. 01:07.290 --> 01:09.810 And that would be fine for a really small application. 01:09.810 --> 01:11.550 But ours is going to be a bit bigger than that. 01:11.550 --> 01:13.580 And we do need a routing solution. 01:13.580 --> 01:18.710 And as mentioned, the de facto solution for lists is React Router. 01:19.250 --> 01:21.260 It's pretty straightforward to use. 01:21.290 --> 01:24.080 It is bigger now than just a routing solution. 01:24.080 --> 01:27.470 But all we're going to use this for is for routing. 01:27.470 --> 01:31.460 They do offer data fetching inside React Router. 01:31.490 --> 01:33.500 Now we're not going to use it for that. 01:33.530 --> 01:38.060 We're simply going to use it for what its original functionality was, which is routing. 01:38.060 --> 01:41.450 We're going to use it for that and pretty straightforward to set up. 01:41.450 --> 01:48.410 We create some routes and we just specify an array of routes with paths and which component we wish 01:48.410 --> 01:52.940 to load when our URL is updated with a particular path in the browser. 01:52.940 --> 01:59.630 Following that, we provide these routes to a router provider, which is provided to our entire application, 01:59.630 --> 02:04.100 so we can use routing functionality from any component inside our app. 02:04.100 --> 02:06.620 And then we provide an outlet component. 02:06.620 --> 02:11.960 And the idea is that when a user browses to a new URL, react router matches it with one of the routes 02:11.960 --> 02:17.930 that we provided, and then loads that component and the outlet is replaced with the component of react 02:17.930 --> 02:19.100 router loads. 02:19.100 --> 02:20.180 So that's the idea. 02:20.210 --> 02:21.380 Pretty straightforward section. 02:21.410 --> 02:24.050 Pretty short section in this training course this one. 02:24.050 --> 02:25.340 And let's begin.