1 00:00:02,240 --> 00:00:04,750 Now with React Router installed, 2 00:00:04,750 --> 00:00:06,940 let's get started using it. 3 00:00:06,940 --> 00:00:10,050 For this, I'll first of all run npm start 4 00:00:10,050 --> 00:00:12,770 to start my React development server 5 00:00:12,770 --> 00:00:14,760 in this dummy project 6 00:00:14,760 --> 00:00:16,450 and with that up and running, 7 00:00:16,450 --> 00:00:18,930 you should see something like this on the page. 8 00:00:18,930 --> 00:00:21,020 This dummy text. 9 00:00:21,020 --> 00:00:25,010 And now we wanna get started using this React Router. 10 00:00:25,010 --> 00:00:28,970 But what does that mean get started using React Router? 11 00:00:28,970 --> 00:00:32,450 Well, in the end, the goal is that we're able 12 00:00:32,450 --> 00:00:35,380 to handle different paths on our page 13 00:00:35,380 --> 00:00:39,470 and load different components for the different paths 14 00:00:39,470 --> 00:00:44,050 so that a request for our-domain.com/ nothing, 15 00:00:44,050 --> 00:00:46,620 for example, loads Component A. 16 00:00:46,620 --> 00:00:51,620 And our-domain.com/products loads Component B, 17 00:00:53,160 --> 00:00:55,500 which could be a component displaying a list 18 00:00:55,500 --> 00:00:57,500 of products, for example. 19 00:00:57,500 --> 00:00:58,830 That's now the goal. 20 00:00:58,830 --> 00:01:02,860 We wanna handle these paths after the domain, 21 00:01:02,860 --> 00:01:05,340 so this text after the domain 22 00:01:05,340 --> 00:01:08,690 to then load different components onto the screen. 23 00:01:08,690 --> 00:01:09,970 And when I say load, 24 00:01:09,970 --> 00:01:13,220 I really mean render these components. 25 00:01:13,220 --> 00:01:17,289 So it's basically like conditionally rendering a component. 26 00:01:17,289 --> 00:01:21,300 You might recall that often in this course we used state 27 00:01:21,300 --> 00:01:25,490 to, in the end, conditionally show a certain component. 28 00:01:25,490 --> 00:01:27,700 For example, show some loading text 29 00:01:27,700 --> 00:01:29,490 whilst we're in a loading state 30 00:01:29,490 --> 00:01:32,520 and show a different component otherwise. 31 00:01:32,520 --> 00:01:35,510 Now we, in the end, wanna do the same thing 32 00:01:35,510 --> 00:01:38,570 but for different paths in the URL. 33 00:01:38,570 --> 00:01:41,270 And we could write our own code for that 34 00:01:41,270 --> 00:01:44,330 where we check what's in the URL 35 00:01:44,330 --> 00:01:46,650 and then set our own state 36 00:01:46,650 --> 00:01:49,690 and where we listen to clicks on links 37 00:01:49,690 --> 00:01:51,900 and prevent the browser default 38 00:01:51,900 --> 00:01:53,480 of sending a request 39 00:01:53,480 --> 00:01:55,740 and instead again change some state 40 00:01:55,740 --> 00:01:58,470 to render something else onto the screen. 41 00:01:58,470 --> 00:02:00,000 We could do all of that 42 00:02:00,000 --> 00:02:03,350 but we did install that react-router-dom package 43 00:02:03,350 --> 00:02:06,330 so that this is done for us. 44 00:02:06,330 --> 00:02:08,714 And indeed, react-router-dom makes 45 00:02:08,714 --> 00:02:12,240 registering different routes, 46 00:02:12,240 --> 00:02:14,513 so different paths in the URL 47 00:02:14,513 --> 00:02:16,650 and the components that should be loaded 48 00:02:16,650 --> 00:02:19,900 for these paths very, very easy. 49 00:02:19,900 --> 00:02:23,310 And we can get started in this App component here. 50 00:02:23,310 --> 00:02:28,310 Here we can import from react-router-dom 51 00:02:31,170 --> 00:02:33,410 and what I wanna import here 52 00:02:33,410 --> 00:02:36,550 is the Route component. 53 00:02:36,550 --> 00:02:39,230 So we import Route from react-router-dom 54 00:02:39,230 --> 00:02:42,053 and Route will actually be a component. 55 00:02:43,009 --> 00:02:47,130 It is a component that allows us to define a certain path 56 00:02:47,130 --> 00:02:50,230 and then the React component that should be loaded 57 00:02:50,230 --> 00:02:53,663 when that path becomes active in the URL. 58 00:02:55,027 --> 00:02:56,240 So for this, we can get started 59 00:02:56,240 --> 00:02:58,050 by adding a couple of components. 60 00:02:58,050 --> 00:03:00,610 For example, in the components folder. 61 00:03:00,610 --> 00:03:03,500 Here we could have our Welcome component, 62 00:03:03,500 --> 00:03:06,370 the starting page so to say. 63 00:03:06,370 --> 00:03:09,240 Welcome.js holds a component function, 64 00:03:09,240 --> 00:03:10,870 just as we learned it 65 00:03:10,870 --> 00:03:13,670 and we, of course, export this component function 66 00:03:13,670 --> 00:03:16,640 so that we can use it outside of this file 67 00:03:16,640 --> 00:03:21,640 and then here all I'll do is I will render a h1 tag 68 00:03:21,900 --> 00:03:24,840 where I say The Welcome Page. 69 00:03:24,840 --> 00:03:26,700 So this is a simple component, 70 00:03:26,700 --> 00:03:30,190 which just outputs this JSX code. 71 00:03:30,190 --> 00:03:32,110 And now I'll copy that page 72 00:03:33,380 --> 00:03:36,560 and create another component, 73 00:03:36,560 --> 00:03:41,130 let's say the Products component 74 00:03:41,130 --> 00:03:42,900 and in that component file, 75 00:03:42,900 --> 00:03:45,260 I'll rename the function to Products 76 00:03:45,260 --> 00:03:48,270 and I'll say The Products Page here. 77 00:03:48,270 --> 00:03:50,390 So now we've got two different components, 78 00:03:50,390 --> 00:03:52,380 which are, of course, very similar 79 00:03:52,380 --> 00:03:54,460 but render different text. 80 00:03:54,460 --> 00:03:56,360 And in reality, of course, 81 00:03:56,360 --> 00:04:00,600 these components would do more than just output some text. 82 00:04:00,600 --> 00:04:02,650 The Products component, for example, 83 00:04:02,650 --> 00:04:05,470 could fetch and display a list of products 84 00:04:05,470 --> 00:04:08,450 but I just wanna get started with routing for now. 85 00:04:08,450 --> 00:04:13,390 We will later see a more realistic project as well. 86 00:04:13,390 --> 00:04:15,620 But now we've got these two components. 87 00:04:15,620 --> 00:04:18,080 And I wanna load those components as pages 88 00:04:18,080 --> 00:04:20,550 with help of this Route component. 89 00:04:20,550 --> 00:04:22,080 For this and this App component, 90 00:04:22,080 --> 00:04:23,990 we register a route 91 00:04:23,990 --> 00:04:25,850 by using that Route component 92 00:04:25,850 --> 00:04:28,480 like we always use components in JSX. 93 00:04:28,480 --> 00:04:31,900 So we just create a custom Route element based 94 00:04:31,900 --> 00:04:33,330 on this component. 95 00:04:33,330 --> 00:04:37,830 And now, this component wants a special prop. 96 00:04:37,830 --> 00:04:40,020 It wants a path prop 97 00:04:40,020 --> 00:04:42,427 and that should be the path in your URL. 98 00:04:43,460 --> 00:04:46,263 And for example, here we could have /welcome. 99 00:04:47,990 --> 00:04:50,410 With that, we're saying this route 100 00:04:50,410 --> 00:04:55,410 should become active if we have our-domain /welcome. 101 00:04:56,780 --> 00:04:59,643 Then this route should become active. 102 00:05:00,770 --> 00:05:02,980 Now, we also need to tell React Router 103 00:05:02,980 --> 00:05:04,830 what active means, 104 00:05:04,830 --> 00:05:09,560 which component should then be loaded onto the screen? 105 00:05:09,560 --> 00:05:11,440 And for this, we actually add opening 106 00:05:11,440 --> 00:05:13,670 and closing Route tags here 107 00:05:13,670 --> 00:05:17,040 and then between these opening and closing Route tags, 108 00:05:17,040 --> 00:05:19,140 we can render the component 109 00:05:19,140 --> 00:05:22,140 that should eventually be rendered here. 110 00:05:22,140 --> 00:05:25,530 For example here, we can import the Welcome component 111 00:05:25,530 --> 00:05:29,430 from ./components/Welcome 112 00:05:30,660 --> 00:05:32,620 and then just render this here 113 00:05:32,620 --> 00:05:35,520 between those Route tags. 114 00:05:35,520 --> 00:05:36,970 Now, the interesting thing 115 00:05:36,970 --> 00:05:39,700 is that this Route component will make sure 116 00:05:39,700 --> 00:05:42,870 that this Welcome component is only displayed 117 00:05:42,870 --> 00:05:47,847 on the screen if our URL path is /welcome. 118 00:05:47,847 --> 00:05:51,250 Otherwise, this will not be displayed. 119 00:05:51,250 --> 00:05:52,770 And of course, we can do the same 120 00:05:52,770 --> 00:05:55,120 for the second page we added. 121 00:05:55,120 --> 00:06:00,120 We can import Products from ./components/Products 122 00:06:01,690 --> 00:06:03,623 and then add a second route. 123 00:06:03,623 --> 00:06:07,430 We just instantiate our Route component here 124 00:06:07,430 --> 00:06:11,540 and then, for example, set the path to /products. 125 00:06:11,540 --> 00:06:13,420 Totally up to you, of course. 126 00:06:13,420 --> 00:06:17,550 Whatever path you wanna support in your URL. 127 00:06:17,550 --> 00:06:22,550 So now we would also support our-domain.com/products 128 00:06:22,640 --> 00:06:26,450 and that should then load the Products component, 129 00:06:26,450 --> 00:06:31,360 whereas the first route will load the Welcome component. 130 00:06:31,360 --> 00:06:33,665 And to load the Products component here, 131 00:06:33,665 --> 00:06:37,780 we need to use Products between those opening 132 00:06:37,780 --> 00:06:39,093 and closing tags. 133 00:06:40,500 --> 00:06:44,260 Now, that's how we generally do register routes 134 00:06:44,260 --> 00:06:46,280 with React Router. 135 00:06:46,280 --> 00:06:48,400 And React Router will then make sure 136 00:06:48,400 --> 00:06:51,020 that it evaluates the URL 137 00:06:51,020 --> 00:06:56,020 and also renders the correct components based on that URL. 138 00:06:56,390 --> 00:07:01,130 However, to kind of activate React Router, 139 00:07:01,130 --> 00:07:04,450 and to make those Route components 140 00:07:04,450 --> 00:07:07,800 and other React Router features work, 141 00:07:07,800 --> 00:07:10,720 we need to do something else in addition 142 00:07:10,720 --> 00:07:12,890 to defining those routes. 143 00:07:12,890 --> 00:07:15,890 We need to go to our root file here 144 00:07:15,890 --> 00:07:19,900 where we render App into some document element 145 00:07:19,900 --> 00:07:22,960 and here in this root file, 146 00:07:22,960 --> 00:07:27,960 we also wanna import something from react-router-dom 147 00:07:28,920 --> 00:07:33,920 and that something here is the BrowserRouter component, 148 00:07:34,963 --> 00:07:38,960 another component provided by react-router-dom. 149 00:07:38,960 --> 00:07:43,010 And we simply need to wrap the overall App, 150 00:07:43,010 --> 00:07:45,590 so this Route App component 151 00:07:45,590 --> 00:07:48,773 with this BrowserRouter component. 152 00:07:50,640 --> 00:07:52,430 That's all we have to do here 153 00:07:52,430 --> 00:07:56,050 but this will then activate this React Router 154 00:07:56,050 --> 00:07:59,470 and unlock these React Router features 155 00:07:59,470 --> 00:08:02,240 like defining routes. 156 00:08:02,240 --> 00:08:04,090 And if we do all of that, 157 00:08:04,090 --> 00:08:05,870 if we go to our page 158 00:08:05,870 --> 00:08:08,320 and we enter /welcome here, 159 00:08:08,320 --> 00:08:10,520 we see The Welcome Page. 160 00:08:10,520 --> 00:08:13,270 And if we enter /products here, 161 00:08:13,270 --> 00:08:15,170 we see The Products Page. 162 00:08:15,170 --> 00:08:18,160 And if I enter anything else like slash nothing, 163 00:08:18,160 --> 00:08:20,030 I don't see anything. 164 00:08:20,030 --> 00:08:21,930 The same for /else. 165 00:08:21,930 --> 00:08:26,340 So any other path, then the two paths we defined here 166 00:08:26,340 --> 00:08:28,230 will not render anything 167 00:08:28,230 --> 00:08:30,310 because neither of the two routes 168 00:08:30,310 --> 00:08:32,080 becomes active in that case 169 00:08:32,080 --> 00:08:36,070 and hence, we simply don't see anything on the screen. 170 00:08:36,070 --> 00:08:39,710 And that's in a nutshell how routing works. 171 00:08:39,710 --> 00:08:42,470 Now, there are more features related to it 172 00:08:42,470 --> 00:08:45,370 and there are more concepts we're going to explore 173 00:08:45,370 --> 00:08:48,180 but that is the core idea behind routing 174 00:08:48,180 --> 00:08:51,990 and how we make it work with React Router. 175 00:08:51,990 --> 00:08:53,580 Now, before we dive deeper, 176 00:08:53,580 --> 00:08:56,300 one last word about these two components, 177 00:08:56,300 --> 00:08:58,377 Welcome and Products, which we load 178 00:08:58,377 --> 00:09:00,910 for these different routes. 179 00:09:00,910 --> 00:09:04,010 These are regular React components. 180 00:09:04,010 --> 00:09:07,300 But since we use them as different pages 181 00:09:07,300 --> 00:09:08,580 in this application, 182 00:09:08,580 --> 00:09:11,510 since we don't use them like all the other components 183 00:09:11,510 --> 00:09:13,240 we worked with before, 184 00:09:13,240 --> 00:09:15,340 it is quite common that you store them 185 00:09:15,340 --> 00:09:17,750 in a folder named pages. 186 00:09:17,750 --> 00:09:21,010 Or screens, whatever you prefer. 187 00:09:21,010 --> 00:09:23,030 I'll go with pages. 188 00:09:23,030 --> 00:09:25,530 You don't need to name the folder pages. 189 00:09:25,530 --> 00:09:28,110 You can stick to components. 190 00:09:28,110 --> 00:09:30,440 But having a separate pages folder 191 00:09:30,440 --> 00:09:34,230 with the components that are loaded by the router 192 00:09:34,230 --> 00:09:37,550 makes it clearer which kind of components these are. 193 00:09:37,550 --> 00:09:39,770 And that you do use these components 194 00:09:39,770 --> 00:09:42,240 in conjunction with the router. 195 00:09:42,240 --> 00:09:44,650 Now, you can still have other components 196 00:09:44,650 --> 00:09:45,820 in your application, 197 00:09:45,820 --> 00:09:48,330 which are then not loaded by the router 198 00:09:48,330 --> 00:09:52,110 but which you instead use in other components' JSX code 199 00:09:52,110 --> 00:09:54,630 as we did it all the time in the course. 200 00:09:54,630 --> 00:09:57,730 And indeed, in reality, most of your components 201 00:09:57,730 --> 00:10:00,020 will be regular components. 202 00:10:00,020 --> 00:10:03,000 But these special components 203 00:10:03,000 --> 00:10:04,980 and special should be in quotes 204 00:10:04,980 --> 00:10:08,610 because these are regular React components 205 00:10:08,610 --> 00:10:11,000 but these regular React components, 206 00:10:11,000 --> 00:10:13,436 which are used in this special way, 207 00:10:13,436 --> 00:10:15,910 so that we use them as routes, 208 00:10:15,910 --> 00:10:17,700 these components can be stored 209 00:10:17,700 --> 00:10:20,580 in a separate folder to make it even clearer 210 00:10:20,580 --> 00:10:23,090 that here we do have components, 211 00:10:23,090 --> 00:10:25,385 which we load through the router. 212 00:10:25,385 --> 00:10:28,610 And with that, we've got basic routing set up. 213 00:10:28,610 --> 00:10:30,133 Now let's dig deeper.