WEBVTT 00:00.110 --> 00:03.830 Okay, now it's time to take a look at routing in our application. 00:03.830 --> 00:06.020 Now we're working with a single page application. 00:06.020 --> 00:11.090 We've only got a single page, and we don't have any other pages to navigate to. 00:11.120 --> 00:16.610 So we can't use traditional routing where we would just click a link and be taken to another HTML page. 00:16.610 --> 00:20.990 We need to route between components in a react application. 00:21.020 --> 00:22.520 Now react is just a library. 00:22.520 --> 00:25.880 It doesn't come with any functionality that helps us with routing. 00:25.880 --> 00:31.700 So we do need to go out there and install a helper package to help us route between our components. 00:31.700 --> 00:37.310 We can use kind of conditionals and do this without using a package, but it gets very messy very quickly, 00:37.310 --> 00:43.580 and the de facto way to do it in a react application is to make use of React Router. 00:43.730 --> 00:52.070 Now, the version that we're currently on with React Router is 6.4, and whilst it used to be just a 00:52.070 --> 00:57.530 routing solution, it's become a bit more bloated nowadays and have added new features that aren't really 00:57.530 --> 01:04.380 related to routing and things like keeping our user interface in sync with our data. 01:04.410 --> 01:07.980 Now we're going to use something else to handle that side of things. 01:07.980 --> 01:10.830 So we're just going to use React Router as a router. 01:10.860 --> 01:12.780 That's what its purpose originally was. 01:12.810 --> 01:16.170 And that's what we're going to use it for in our application. 01:16.200 --> 01:19.560 So if we click on Im new we'll get taken to a tutorial. 01:19.560 --> 01:21.630 And it tells us what we need to do here. 01:21.660 --> 01:26.220 And all we really need to do is just install React Router Dom. 01:26.280 --> 01:27.780 That's what we're going to do. 01:27.780 --> 01:32.400 And then we're going to configure React Router to work with our application so that we can navigate 01:32.400 --> 01:33.810 between components. 01:33.810 --> 01:38.010 So I'm just going to copy this into my clipboard I'm going to head over to VS code. 01:38.010 --> 01:39.930 I will open the terminal. 01:40.020 --> 01:46.200 And please make sure you're in the client folder as we're installing packages into our application. 01:46.230 --> 01:52.410 Now I fully expect this to fail because I am using react 19 release candidates. 01:52.410 --> 01:55.710 And we've seen that legacy peer dependencies warning already. 01:55.710 --> 01:57.360 I'm expecting to get it again. 01:57.390 --> 02:00.780 If you're on react 19 the stable version then it should just work. 02:00.780 --> 02:02.460 But let's give it a go. 02:02.460 --> 02:09.520 And sure enough, I need to add the switch so I will add the required switch and say dash dash, legacy, 02:09.550 --> 02:15.640 dash peer, dash deps and press return and this will get it installed successfully. 02:15.640 --> 02:16.300 So great. 02:16.330 --> 02:20.650 Now we've got the routing functionality installed, but we don't really have too many components that 02:20.650 --> 02:22.240 we can actually route to yet. 02:22.240 --> 02:29.470 So as part of this, we will create some additional components inside our project and inside the features 02:29.470 --> 02:32.530 folder I'm just going to right click say New File. 02:32.770 --> 02:35.320 And I'm going to have an about folder. 02:35.320 --> 02:40.750 And this is going to contain an about page dot TSX components. 02:40.750 --> 02:43.690 And I'm just going to use the snippet to create. 02:43.930 --> 02:51.010 Or I'm going to try to use a snippet and use the snippet to create the react components with the about 02:51.010 --> 02:51.310 page. 02:51.310 --> 02:52.870 I'm not going to change anything inside here. 02:52.870 --> 02:57.160 We'll just have the div left as it is, and we're not really going to have an about page. 02:57.160 --> 03:00.940 We'll use it for something different, but just so that we've got some links to display at the top of 03:00.940 --> 03:04.030 our nav bar, we will have an about page. 03:04.030 --> 03:10.070 I'm also going to do the same and say contacts forward slash Contact page. 03:10.370 --> 03:15.350 TSX and again I'm just going to use the snippet to create the component. 03:15.350 --> 03:23.330 We'll also have another page and I'm going to have a folder called home and say forward slash and say 03:23.330 --> 03:25.370 home page dot TSX. 03:25.370 --> 03:28.070 And once again we won't do anything with this really. 03:28.100 --> 03:34.250 We're just going to have the boilerplate for our react component and do nothing else with it just yet. 03:34.250 --> 03:39.860 And also inside the catalog I'm just going to right click say New File. 03:39.860 --> 03:45.830 And we're also going to have a product details dot TSX component as well. 03:45.830 --> 03:49.820 And same thing again I'll just use the snippet to get that populated. 03:49.820 --> 03:55.550 So let's make use of React Router and set that up in our application inside the app folder. 03:55.550 --> 03:58.010 This is related to our application as a whole. 03:58.040 --> 04:05.630 I'm just going to right click say new File and say routes forward slash and then routes dot TSX. 04:05.660 --> 04:07.580 This is going to be a react component. 04:07.790 --> 04:13.930 Or we need to give it the TSX because we're going to use react functionality inside here, particularly 04:14.110 --> 04:18.460 react components, of course, because these are what we're going to be routing to. 04:18.490 --> 04:20.380 So I'll press return to create that. 04:20.470 --> 04:27.010 And material UI gives us this little routing icon because it recognizes that we've called our file routes 04:27.220 --> 04:28.330 TSX. 04:28.690 --> 04:33.910 And inside here I'm going to export a const called router equals. 04:33.910 --> 04:40.420 And then we're going to use a function we get from React router Dom called Create browser router. 04:40.870 --> 04:42.820 There are different versions of React Router. 04:42.820 --> 04:44.110 There's one for React Native. 04:44.140 --> 04:48.820 But we want the browser functionality because we're creating a browser based application. 04:48.850 --> 04:54.400 So I'll press return and that gets the import in from React Router Dom. 04:54.610 --> 04:57.070 So I'm just going to open up parentheses. 04:57.070 --> 05:03.370 And this takes this function takes an array of root objects that we can see there. 05:03.430 --> 05:09.610 I'll open square brackets press return and then we can start defining our routes. 05:09.640 --> 05:17.920 Now the first route we need is the root Route, which sounds silly when I say it with the English pronunciation 05:17.920 --> 05:24.220 of routes or British pronunciation of route, but it's going to be the route route, if that makes more 05:24.220 --> 05:25.030 sense. 05:25.030 --> 05:29.290 So the one at the top of the tree, or if we're talking about roots of trees, I guess they're at the 05:29.290 --> 05:29.650 bottom. 05:29.650 --> 05:33.070 But this is going to be our root route. 05:33.490 --> 05:35.650 I'll try and make it clear as we go along. 05:35.650 --> 05:41.650 But anyway, we're going to have a path and that's just going to be a forward slash inside quotes. 05:41.650 --> 05:46.390 And then we specify the elements we wish to load up when this route is triggered. 05:46.390 --> 05:48.010 So we specify the element. 05:48.010 --> 05:51.430 And inside here we specify the component we wish to load. 05:51.430 --> 05:54.490 And this is going to be our app component. 05:55.030 --> 06:00.310 And our routes routes will specify children. 06:00.340 --> 06:03.280 And then we'll open up square brackets. 06:03.280 --> 06:07.960 And this is going to take the routes of our different components inside here. 06:08.230 --> 06:10.390 So we're going to specify curly brackets. 06:10.390 --> 06:12.100 Again specify the path. 06:12.100 --> 06:16.420 And this is going to be the route for our home page. 06:16.420 --> 06:19.400 So it's just going to be empty quotes here, nothing else. 06:19.400 --> 06:22.010 And we'll specify the element we wish to load. 06:22.010 --> 06:24.710 And that's going to be the home page. 06:24.710 --> 06:26.930 And I'll add the closing tag. 06:26.930 --> 06:28.550 Now I'll just add a comma after this. 06:28.550 --> 06:31.910 And we'll just add four more routes inside here. 06:31.910 --> 06:34.700 So the second one this is going to be for our catalog. 06:34.700 --> 06:36.680 So I'm going to specify forward slash. 06:36.680 --> 06:38.930 That forward slash is important. 06:38.930 --> 06:40.430 So please include that. 06:40.430 --> 06:44.030 And this is going to load up the catalog component. 06:44.060 --> 06:45.650 Now I'm getting an error here. 06:45.650 --> 06:48.170 And why am I getting an error. 06:48.530 --> 06:52.220 Well it's telling us that this is expecting a product property. 06:52.220 --> 06:56.060 And we haven't included it with the catalog. 06:56.060 --> 07:00.800 So we're going to need to make some changes to our app to accommodate this and the functionality that 07:00.800 --> 07:03.140 we have currently in our app component. 07:03.140 --> 07:05.300 I'm going to move it to the catalog. 07:05.630 --> 07:11.000 Technically it would be possible kind of, although not really a good idea to put that functionality 07:11.000 --> 07:15.440 inside our routing file so that we could pass the products down, but I think that would be a terrible 07:15.440 --> 07:18.260 idea, and we're just not going to do it that way. 07:18.260 --> 07:23.080 We'll simply move the code to where it's most appropriate, which is in the catalog itself. 07:23.080 --> 07:25.720 But I'm going to ignore that warning for now, and we'll fix it soon. 07:25.720 --> 07:27.370 We'll just get our routes in place. 07:27.370 --> 07:34.300 First of all, the next route is going to be forward slash, catalog, forward slash and then colon 07:34.300 --> 07:42.340 ID now this colon ID is effectively a placeholder for the product details is what we're going to use 07:42.340 --> 07:42.790 this for. 07:42.790 --> 07:46.570 So I'll add the component inside here for the product details. 07:46.750 --> 07:53.470 But effectively in order to get to the product details component then this would be catalog forward 07:53.470 --> 07:56.470 slash two or catalog forward slash three. 07:56.470 --> 08:03.070 And the ID is a placeholder for the route parameter that we use to get to a specific product, so that 08:03.070 --> 08:05.770 we can load up the details of that product. 08:06.730 --> 08:13.840 The next one we'll add is just the abouts, and we'll just use the about page as the component there. 08:13.840 --> 08:17.110 And we'll also have forward slash contacts. 08:17.110 --> 08:23.380 And we'll specify the contact page inside here and do double check. 08:23.410 --> 08:26.620 Your imports have come in correctly now. 08:26.650 --> 08:30.940 Of course we've got an error with the catalog page, because if we open up the catalog. 08:30.940 --> 08:37.390 And by the way, another way to get to a component is you can just right click and go to definition. 08:37.390 --> 08:41.530 Or if you want to use the shortcut key there's an F12 option to go to the definition. 08:41.530 --> 08:44.770 And this will take you directly to the catalog component. 08:44.770 --> 08:47.470 So just another way of navigating here. 08:47.470 --> 08:54.520 So the issue we've got with our catalog of course is products is required because it's not optional. 08:54.520 --> 08:57.760 If we wanted to make that optional we would need to use the question mark there. 08:57.760 --> 09:03.640 But then we've got further problems because TypeScript is going to help us and say, hey, products 09:03.670 --> 09:07.120 is possibly undefined and you've passed it to this product list. 09:07.120 --> 09:08.260 So we don't want to make that optional. 09:08.290 --> 09:12.100 We in fact, we don't want to pass props into here at all. 09:12.100 --> 09:17.260 So I'm actually going to remove the products from the props in the catalog component. 09:17.260 --> 09:29.120 And I will go back to the app component to the app dot TSX and let's move the products code into the 09:29.120 --> 09:32.480 catalog components where we've got our usestate here. 09:32.480 --> 09:38.780 I'm going to cut the products from there and go to the catalog and paste it inside here. 09:39.230 --> 09:42.770 And I'll just bring in the import for Usestate. 09:42.800 --> 09:46.760 And then I'll go back to the app component and see what else we need to move. 09:46.760 --> 09:48.770 And we also need to move the Useeffect. 09:48.770 --> 09:51.290 So I'm just going to cut this from there. 09:51.320 --> 09:56.480 Go back to the catalog and we'll specify the useeffect inside here. 09:56.480 --> 10:00.170 And we also need to bring in the Useeffect from react as well. 10:00.170 --> 10:02.330 So we get that import at the top. 10:02.480 --> 10:04.910 So that cleans up the code in our catalog. 10:04.910 --> 10:07.820 But now we've got some issues in our app.tsx of course. 10:07.820 --> 10:14.150 And we can remove the passing down of the products to the catalog inside here. 10:14.150 --> 10:17.720 And we can clean up anything we're not using at the top as well. 10:17.720 --> 10:21.230 So that's the Useeffect as well inside here. 10:21.260 --> 10:25.730 Now, if we go back to our roots, what we should find is that the warning has gone away. 10:25.760 --> 10:33.390 So that's almost all of the configuration set up, but we want our app component to load when our application 10:33.390 --> 10:33.810 loads. 10:33.810 --> 10:38.940 And if we go to our entry point for the application, I'm just going to open up the main dot TSX. 10:38.940 --> 10:41.310 We've got our app inside here. 10:41.580 --> 10:47.820 Now we need to use the router provider that we get from React Router instead. 10:47.820 --> 10:51.510 So we specify router provider inside the strict mode. 10:51.510 --> 10:55.050 And we give this a property of router. 10:55.050 --> 11:00.930 And we're going to set it to the router that we created that we get from app routes routes. 11:01.320 --> 11:03.090 So do ensure that's been brought in. 11:03.090 --> 11:06.690 And we'll just clear out the import layer. 11:07.020 --> 11:09.990 And one more thing to go before we can test this. 11:10.020 --> 11:12.600 Now we don't have our app component being loaded up. 11:12.600 --> 11:14.130 When our application loads. 11:14.130 --> 11:17.160 It's going to be loaded by the router provider. 11:17.550 --> 11:24.180 So let's go to the app component because inside here this is where we specify an outlet. 11:24.180 --> 11:30.700 So instead of catalog here we're going to use outlet which we get from React Router Dom. 11:30.940 --> 11:36.730 And what this means is when we navigate to a specific route inside this container, we have our outlets. 11:36.730 --> 11:42.460 And when we navigate to let's say the catalog, then outlet is going to be replaced with our catalog 11:42.460 --> 11:43.630 component. 11:43.840 --> 11:50.260 If we navigate to our about page then again outlet is going to be replaced with the about page. 11:50.290 --> 11:51.550 Now we can test this. 11:51.580 --> 11:56.620 We don't have any links to click on yet, but if I just refresh the page, I can see that I'm on my 11:56.620 --> 11:59.200 home page and I can see the home page text. 11:59.200 --> 12:07.450 If I say forward slash about in the URL and press return, I can see I'm taken to the about page and 12:07.450 --> 12:12.940 if I specify catalog, then I can see that I'm loading up the list of products. 12:12.940 --> 12:19.000 And if I say catalog forward slash two, then I get taken to the product details component. 12:19.000 --> 12:21.340 So that's the routing functionality working. 12:21.340 --> 12:27.190 And what we'll take a look at next is well giving the user something to click on because we don't expect 12:27.190 --> 12:30.880 them to use the URL to navigate around our application. 12:30.880 --> 12:33.130 And we'll take a look at that next.