1 00:00:02,000 --> 00:00:04,000 So we got data fetching, and data sending, 2 00:00:04,000 --> 00:00:07,000 and this demo website, therefore, looks quite nice, 3 00:00:07,000 --> 00:00:10,000 quite decent, and we learned a lot about React. 4 00:00:10,000 --> 00:00:14,000 However, there's one last crucial feature missing 5 00:00:14,000 --> 00:00:17,000 in this website, which I'd also like to explore together 6 00:00:17,000 --> 00:00:19,000 with you, and that would be routing. 7 00:00:19,000 --> 00:00:21,000 Now, what's routing? 8 00:00:22,000 --> 00:00:25,000 Many React apps, I would say, almost all React apps, 9 00:00:25,000 --> 00:00:28,000 at least, definitely if they are anything 10 00:00:28,000 --> 00:00:31,000 but simple demo apps, might want to have routing 11 00:00:31,000 --> 00:00:35,000 which simply means that you wanna support different paths 12 00:00:35,000 --> 00:00:39,000 and load different pages, different components in the end, 13 00:00:39,000 --> 00:00:40,000 for those different paths. 14 00:00:41,000 --> 00:00:45,000 At the moment, our demo website here, only has one path. 15 00:00:45,000 --> 00:00:48,000 No matter if I click new post or not, the path up there, 16 00:00:48,000 --> 00:00:51,000 the URL always stays the same. 17 00:00:52,000 --> 00:00:55,000 The disadvantage of this is that I, for example, 18 00:00:55,000 --> 00:00:59,000 can't link users to this new post mode. 19 00:00:59,000 --> 00:01:02,000 If I want to send a link to someone that allows them 20 00:01:02,000 --> 00:01:04,000 to immediately create a new post, 21 00:01:04,000 --> 00:01:06,000 I could try to copy this URL, 22 00:01:06,000 --> 00:01:08,000 but if I paste it in and hit enter, 23 00:01:08,000 --> 00:01:10,000 I end up on the starting page again 24 00:01:10,000 --> 00:01:14,000 because this React app has no pages. 25 00:01:14,000 --> 00:01:16,000 And that should generally make sense 26 00:01:16,000 --> 00:01:18,000 because as mentioned before, 27 00:01:18,000 --> 00:01:21,000 we're building a single page application with React, 28 00:01:21,000 --> 00:01:25,000 so we have only one page, only one HTML file. 29 00:01:25,000 --> 00:01:27,000 But the idea behind routing is 30 00:01:27,000 --> 00:01:31,000 that we can still support multiple paths by simply listening 31 00:01:31,000 --> 00:01:35,000 to URL changes whilst the app is running 32 00:01:35,000 --> 00:01:39,000 or by evaluating the URL when it's first loaded, 33 00:01:39,000 --> 00:01:42,000 and by then loading different components for different paths 34 00:01:42,000 --> 00:01:45,000 that are encoded in the URL. 35 00:01:45,000 --> 00:01:49,000 So that for our domain/nothing, we load the landing page, 36 00:01:49,000 --> 00:01:53,000 for /products, we load the products page, and so on. 37 00:01:53,000 --> 00:01:54,000 That's routing. 38 00:01:55,000 --> 00:01:59,000 And even though React apps are SPAs, as you learned, 39 00:01:59,000 --> 00:02:02,000 there is a solution for still getting this behavior. 40 00:02:02,000 --> 00:02:04,000 And that's the React router package, 41 00:02:04,000 --> 00:02:08,000 which is the most popular routing package for React 42 00:02:08,000 --> 00:02:12,000 because React itself has no routing capabilities built in. 43 00:02:12,000 --> 00:02:14,000 And whilst you could build your own solution 44 00:02:14,000 --> 00:02:19,000 where you try to take a look at the URL, extract the path, 45 00:02:19,000 --> 00:02:22,000 and load different components for different paths, 46 00:02:22,000 --> 00:02:24,000 React Router is a powerful package 47 00:02:24,000 --> 00:02:26,000 that solves all these problems for you, 48 00:02:26,000 --> 00:02:30,000 and it offers tons of features related to routing. 49 00:02:30,000 --> 00:02:32,000 Now, just as with all the other React parts, 50 00:02:32,000 --> 00:02:36,000 I dive way deeper into React Router in my full course, 51 00:02:36,000 --> 00:02:39,000 but we'll still get started with this super useful package 52 00:02:39,000 --> 00:02:41,000 in this crash course here. 53 00:02:41,000 --> 00:02:45,000 Now, React Router also has an official website where you, 54 00:02:45,000 --> 00:02:47,000 of course, can also learn all about it. 55 00:02:47,000 --> 00:02:49,000 And it's also worth mentioning 56 00:02:49,000 --> 00:02:52,000 that there are different versions of this package. 57 00:02:52,000 --> 00:02:55,000 And for example, version five is still quite popular, 58 00:02:55,000 --> 00:02:57,000 but version six, for example, works quite differently 59 00:02:57,000 --> 00:03:00,000 compared to version five, and therefore, 60 00:03:00,000 --> 00:03:03,000 I also got separate videos where I explain what's new 61 00:03:03,000 --> 00:03:06,000 in version six and also in 6.4 which also 62 00:03:06,000 --> 00:03:09,000 added even more exciting features to React Router. 63 00:03:09,000 --> 00:03:12,000 In this crash course, we're of course going to dive into 64 00:03:12,000 --> 00:03:13,000 that latest version here. 65 00:03:15,000 --> 00:03:16,000 And for that, we first of all, 66 00:03:16,000 --> 00:03:18,000 have to quit our development server 67 00:03:18,000 --> 00:03:21,000 here in the front-end application 68 00:03:21,000 --> 00:03:25,000 and run npm install react-router-dom. 69 00:03:25,000 --> 00:03:28,000 So not just react-router, but react-router-dom. 70 00:03:28,000 --> 00:03:29,000 This package must be installed 71 00:03:29,000 --> 00:03:31,000 and that gives us React Router 72 00:03:31,000 --> 00:03:34,000 in this front-end application. 73 00:03:34,000 --> 00:03:36,000 Now with that, we can add routing, 74 00:03:36,000 --> 00:03:39,000 and what's really important to keep in mind is that we still 75 00:03:39,000 --> 00:03:41,000 have a front-end application. 76 00:03:41,000 --> 00:03:43,000 This routing happens on the client side, 77 00:03:43,000 --> 00:03:48,000 not on some backend, but it does still enable us 78 00:03:48,000 --> 00:03:49,000 to support different paths 79 00:03:49,000 --> 00:03:51,000 and simply load different components 80 00:03:51,000 --> 00:03:53,000 for those different paths.