1 00:00:01,140 --> 00:00:04,590 ‫Okay, so now that we know what routing 2 00:00:04,590 --> 00:00:06,090 ‫and routes are, 3 00:00:06,090 --> 00:00:10,890 ‫let's use the React Router library for the very first time. 4 00:00:10,890 --> 00:00:13,230 ‫So in order to implement some routes 5 00:00:13,230 --> 00:00:16,203 ‫for the main pages in our application. 6 00:00:17,850 --> 00:00:19,140 ‫So with routing, 7 00:00:19,140 --> 00:00:22,860 ‫we now want to associate basically specific parts 8 00:00:22,860 --> 00:00:27,210 ‫of the URL to specific components in our application. 9 00:00:27,210 --> 00:00:28,680 ‫So if we had, for example, 10 00:00:28,680 --> 00:00:33,120 ‫this root URL and then /product, 11 00:00:33,120 --> 00:00:36,483 ‫then we would want to display a product component here. 12 00:00:37,350 --> 00:00:40,350 ‫So right now with this, of course, nothing happens. 13 00:00:40,350 --> 00:00:43,320 ‫So our app still looks exactly the same 14 00:00:43,320 --> 00:00:45,390 ‫but now let's change that. 15 00:00:45,390 --> 00:00:47,190 ‫So we will define a route 16 00:00:47,190 --> 00:00:50,913 ‫for this URL and for a couple other ones as well. 17 00:00:52,680 --> 00:00:56,670 ‫So to start, let's actually create the pages, 18 00:00:56,670 --> 00:00:59,490 ‫so the components for the pages. 19 00:00:59,490 --> 00:01:03,840 ‫And for that I will create a new folder inside our sources 20 00:01:03,840 --> 00:01:06,333 ‫and I will call this one pages. 21 00:01:07,320 --> 00:01:10,950 ‫So pages is for these structural components 22 00:01:10,950 --> 00:01:14,100 ‫that we will then match to these URLs. 23 00:01:14,100 --> 00:01:17,553 ‫And let's start with the product page. 24 00:01:18,390 --> 00:01:20,463 ‫So Product.jsx. 25 00:01:21,600 --> 00:01:26,370 ‫And then let's again use that snippet to be a bit faster. 26 00:01:26,370 --> 00:01:27,750 ‫And then here I will really 27 00:01:27,750 --> 00:01:30,840 ‫just write something very simple. 28 00:01:30,840 --> 00:01:33,150 ‫So we will get all the content and the styling 29 00:01:33,150 --> 00:01:36,210 ‫for each of our pages a bit later, but for now, 30 00:01:36,210 --> 00:01:40,440 ‫I'm really only concerned about making our routes work 31 00:01:40,440 --> 00:01:43,290 ‫so that you can learn how to use React Router 32 00:01:43,290 --> 00:01:44,643 ‫in a very simple way. 33 00:01:47,066 --> 00:01:48,330 ‫So let's close this one here 34 00:01:48,330 --> 00:01:50,643 ‫and let's create just a few more pages. 35 00:01:52,620 --> 00:01:54,100 ‫So let's do the homepage 36 00:01:57,540 --> 00:02:02,270 ‫and let's actually use now WorldWise here, 37 00:02:02,270 --> 00:02:04,320 ‫so the name of the app. 38 00:02:04,320 --> 00:02:09,320 ‫And then let's also create a pricing page. 39 00:02:14,190 --> 00:02:17,220 ‫Okay, and so with this, we have three pages 40 00:02:17,220 --> 00:02:20,223 ‫and so we can create three routes for them. 41 00:02:21,630 --> 00:02:24,720 ‫And so that's what we'll do next. 42 00:02:24,720 --> 00:02:27,630 ‫So let's open up again a new terminal here 43 00:02:27,630 --> 00:02:30,510 ‫so that we don't have to finish the current process. 44 00:02:30,510 --> 00:02:35,510 ‫And then let's install our React Router package. 45 00:02:35,610 --> 00:02:40,610 ‫So npm install react-router, and then very important, 46 00:02:41,730 --> 00:02:44,280 ‫it needs to be the one for the DOM. 47 00:02:44,280 --> 00:02:45,990 ‫Now, if we just install this, 48 00:02:45,990 --> 00:02:48,990 ‫then it would, of course, install the latest version, 49 00:02:48,990 --> 00:02:51,660 ‫which in the future when you build your own apps, 50 00:02:51,660 --> 00:02:53,400 ‫that's what you're going to do. 51 00:02:53,400 --> 00:02:55,260 ‫But for now in this project, 52 00:02:55,260 --> 00:02:59,130 ‫we will want to make sure that we're using version six 53 00:02:59,130 --> 00:03:03,003 ‫so that your code will work exactly the same way as mine. 54 00:03:04,380 --> 00:03:06,003 ‫So let's install that. 55 00:03:08,520 --> 00:03:10,950 ‫And that was pretty fast. 56 00:03:10,950 --> 00:03:15,090 ‫Okay, now since React version 6.4, 57 00:03:15,090 --> 00:03:19,380 ‫there are two big ways of defining routes in our code. 58 00:03:19,380 --> 00:03:22,650 ‫And we are going to use the more traditional approach, 59 00:03:22,650 --> 00:03:25,890 ‫which is basically to define our routes 60 00:03:25,890 --> 00:03:27,930 ‫in a declarative way. 61 00:03:27,930 --> 00:03:31,590 ‫So what this means is that basically, we will use a couple 62 00:03:31,590 --> 00:03:34,800 ‫of special components that React Router gives us 63 00:03:34,800 --> 00:03:38,493 ‫to define our routes right in the JSX. 64 00:03:39,390 --> 00:03:41,130 ‫So that sounds confusing. 65 00:03:41,130 --> 00:03:42,933 ‫And so let's just do it. 66 00:03:44,190 --> 00:03:46,710 ‫So we start by using the BrowserRouter. 67 00:03:46,710 --> 00:03:47,703 ‫So BrowserRouter. 68 00:03:49,227 --> 00:03:53,250 ‫And then again, VS Code suggests us this import. 69 00:03:53,250 --> 00:03:56,040 ‫And so if we hit then enter, 70 00:03:56,040 --> 00:03:59,220 ‫you see that BrowserRouter has been brought in here 71 00:03:59,220 --> 00:04:01,530 ‫from react-router-dom 72 00:04:01,530 --> 00:04:05,190 ‫So make sure you have that line of code right there. 73 00:04:05,190 --> 00:04:07,440 ‫And then let's keep going. 74 00:04:07,440 --> 00:04:12,000 ‫So now in there, we need the routes component, and again, 75 00:04:12,000 --> 00:04:15,660 ‫make sure that it has been correctly imported here. 76 00:04:15,660 --> 00:04:20,340 ‫And now finally, we do the actual route definition. 77 00:04:20,340 --> 00:04:23,160 ‫So we need all of these other components here 78 00:04:23,160 --> 00:04:28,160 ‫but then now we can finally use the route component. 79 00:04:28,680 --> 00:04:31,890 ‫And so this is where we define basically the URL, 80 00:04:31,890 --> 00:04:34,500 ‫which is called the path prop. 81 00:04:34,500 --> 00:04:36,930 ‫And then for each path, of course, 82 00:04:36,930 --> 00:04:39,723 ‫we will be able to define one component. 83 00:04:41,010 --> 00:04:44,040 ‫And here let's start with product. 84 00:04:44,040 --> 00:04:48,450 ‫So the one that we already have here right now. 85 00:04:48,450 --> 00:04:52,023 ‫And then here we need to define a React element. 86 00:04:53,730 --> 00:04:56,100 ‫So not just the name of a component, 87 00:04:56,100 --> 00:04:58,170 ‫but really a React element, 88 00:04:58,170 --> 00:05:01,203 ‫which we get by using the component. 89 00:05:02,310 --> 00:05:05,073 ‫So here we want to use the product component, 90 00:05:07,860 --> 00:05:11,550 ‫so that page that we created right here. 91 00:05:11,550 --> 00:05:13,833 ‫And so then we need to bring that in here. 92 00:05:14,820 --> 00:05:19,820 ‫So import Product from, and then we need to step 93 00:05:20,400 --> 00:05:24,363 ‫into the pages folder and get Product from there. 94 00:05:26,100 --> 00:05:28,410 ‫All right, then we need to close 95 00:05:28,410 --> 00:05:31,323 ‫this route component right here. 96 00:05:32,310 --> 00:05:33,390 ‫And now I saved it. 97 00:05:33,390 --> 00:05:35,400 ‫And then we got this error here, 98 00:05:35,400 --> 00:05:37,530 ‫which is just because I didn't bring 99 00:05:37,530 --> 00:05:41,970 ‫in the route component here, but now as I save, 100 00:05:41,970 --> 00:05:45,660 ‫watch how it actually already automatically went 101 00:05:45,660 --> 00:05:47,463 ‫to the product component. 102 00:05:48,660 --> 00:05:52,860 ‫So great, but let's keep going here. 103 00:05:52,860 --> 00:05:54,960 ‫And then we will analyze this further 104 00:05:54,960 --> 00:05:58,383 ‫and really try to understand what is happening there. 105 00:06:00,000 --> 00:06:03,783 ‫So now let's also do the pricing path. 106 00:06:07,890 --> 00:06:11,290 ‫And here now we need then the pricing component 107 00:06:12,480 --> 00:06:14,280 ‫or actually the element. 108 00:06:14,280 --> 00:06:16,740 ‫And we use an element here because this way, 109 00:06:16,740 --> 00:06:21,740 ‫we will be able to pass props into this element. 110 00:06:21,870 --> 00:06:25,020 ‫So it could also be component, which it used to be 111 00:06:25,020 --> 00:06:29,610 ‫before version five or before version six actually. 112 00:06:29,610 --> 00:06:31,410 ‫So then we would just do this. 113 00:06:31,410 --> 00:06:34,500 ‫So basically just passing in the entire component 114 00:06:34,500 --> 00:06:38,250 ‫but then it would be very hard to pass in some props. 115 00:06:38,250 --> 00:06:41,790 ‫And so with this, that's a lot easier. 116 00:06:41,790 --> 00:06:43,863 ‫So just duplicating that line here. 117 00:06:46,500 --> 00:06:48,720 ‫And actually, let's do it again 118 00:06:48,720 --> 00:06:52,653 ‫for the homepage that we need next. 119 00:06:53,790 --> 00:06:55,533 ‫Here we need to just close that. 120 00:06:57,030 --> 00:06:59,763 ‫And then let's do the homepage here at the very top. 121 00:07:00,630 --> 00:07:05,100 ‫So here the path is just the route path basically. 122 00:07:05,100 --> 00:07:07,680 ‫And then the element that we want 123 00:07:07,680 --> 00:07:10,620 ‫is, of course, our Homepage. 124 00:07:10,620 --> 00:07:12,930 ‫And of course, it could be any other name 125 00:07:12,930 --> 00:07:15,483 ‫but that's just a page name that I like. 126 00:07:16,800 --> 00:07:19,950 ‫Okay, and now let's try this out. 127 00:07:19,950 --> 00:07:22,590 ‫So we already saw that now we have 128 00:07:22,590 --> 00:07:24,900 ‫our Product component right here. 129 00:07:24,900 --> 00:07:27,723 ‫And so let's check that out in our component tree. 130 00:07:28,920 --> 00:07:32,250 ‫And so now we get all these components that we have here 131 00:07:32,250 --> 00:07:37,250 ‫right inside our component tree, plus a few other ones. 132 00:07:37,500 --> 00:07:41,790 ‫But mainly we have our BrowserRouter, the router, 133 00:07:41,790 --> 00:07:45,240 ‫then the routes that we wrote into our code 134 00:07:45,240 --> 00:07:48,300 ‫and finally, the product component. 135 00:07:48,300 --> 00:07:53,300 ‫So what React Router did was to take a look at the URL here. 136 00:07:53,430 --> 00:07:56,670 ‫And so then it saw that we had Product here. 137 00:07:56,670 --> 00:07:59,820 ‫And so then it saw all these different routes 138 00:07:59,820 --> 00:08:01,170 ‫that we defined here 139 00:08:01,170 --> 00:08:04,470 ‫and it then selected the one that matches that part 140 00:08:04,470 --> 00:08:05,580 ‫of the URL. 141 00:08:05,580 --> 00:08:07,230 ‫And so that's product. 142 00:08:07,230 --> 00:08:10,950 ‫And so then this element here will be displayed here 143 00:08:10,950 --> 00:08:12,060 ‫in the UI. 144 00:08:12,060 --> 00:08:15,093 ‫And these other two are basically disregarded. 145 00:08:16,830 --> 00:08:18,333 ‫Let's try another one here. 146 00:08:19,410 --> 00:08:21,870 ‫So Pricing and that, of course, 147 00:08:21,870 --> 00:08:24,360 ‫will show us our pricing component. 148 00:08:24,360 --> 00:08:26,910 ‫And finally, if we remove everything 149 00:08:26,910 --> 00:08:30,543 ‫and go back to the route URL, then we get WorldWise. 150 00:08:32,130 --> 00:08:37,023 ‫Beautiful. So with this, we have our first routes defined. 151 00:08:38,640 --> 00:08:40,803 ‫Now, let me just show you something here. 152 00:08:41,880 --> 00:08:46,380 ‫So let's say we had some div around all of this 153 00:08:46,380 --> 00:08:50,670 ‫and then here we had some h1 element with something. 154 00:08:53,580 --> 00:08:56,913 ‫And so then well, that's a bit too big. 155 00:08:58,170 --> 00:08:59,670 ‫So then this part here, 156 00:08:59,670 --> 00:09:03,600 ‫this h1 would always stay in the page. 157 00:09:03,600 --> 00:09:05,700 ‫So this one is always here 158 00:09:05,700 --> 00:09:09,990 ‫but then the router chooses between one of these path. 159 00:09:09,990 --> 00:09:11,820 ‫So one of these three routes 160 00:09:11,820 --> 00:09:15,900 ‫and then here below that will display this part. 161 00:09:15,900 --> 00:09:20,520 ‫So now if we had, for example, here Pricing, 162 00:09:20,520 --> 00:09:23,820 ‫then you see the Hello Router part stays the same 163 00:09:23,820 --> 00:09:26,160 ‫but then it's as if this part here 164 00:09:26,160 --> 00:09:29,070 ‫was replaced by the pricing. 165 00:09:29,070 --> 00:09:30,390 ‫So if you had a part 166 00:09:30,390 --> 00:09:33,810 ‫of the page that you really want to always stay the same, 167 00:09:33,810 --> 00:09:35,430 ‫then this is how you would do it. 168 00:09:35,430 --> 00:09:39,570 ‫But usually what we do is to just have our app component 169 00:09:39,570 --> 00:09:42,900 ‫basically deciding which page should be displayed 170 00:09:42,900 --> 00:09:43,733 ‫in the UI. 171 00:09:45,450 --> 00:09:49,350 ‫So that's all this component here is going to do. 172 00:09:49,350 --> 00:09:52,230 ‫It will not really have its own output. 173 00:09:52,230 --> 00:09:57,230 ‫All it will do is, yeah, as I just said, displaying here one 174 00:09:57,270 --> 00:10:00,723 ‫of the pages, which is the one that matches the route. 175 00:10:02,670 --> 00:10:05,370 ‫Let's just decrease this here a little bit. 176 00:10:05,370 --> 00:10:09,600 ‫And now to finish, let me just show you another thing. 177 00:10:09,600 --> 00:10:14,140 ‫So let's create here another page called PageNotFound.jsx. 178 00:10:21,119 --> 00:10:25,367 ‫And then let's say not found here for now. 179 00:10:25,367 --> 00:10:28,700 ‫And so what we can do now is at the end, 180 00:10:30,092 --> 00:10:33,842 ‫create a route with the path set to the star. 181 00:10:35,627 --> 00:10:38,242 ‫And so this will basically catch all the routes 182 00:10:38,242 --> 00:10:42,409 ‫that were not matched to one of these other three. 183 00:10:43,973 --> 00:10:48,890 ‫And so this is how we basically implement a page not found. 184 00:10:52,110 --> 00:10:53,613 ‫Then closing this route. 185 00:10:55,800 --> 00:11:00,800 ‫And of course, now we need to bring that in, not found. 186 00:11:04,200 --> 00:11:07,860 ‫All right, so again, this last route here 187 00:11:07,860 --> 00:11:10,440 ‫with the star will basically be matched 188 00:11:10,440 --> 00:11:13,740 ‫if none of the other routes are matched. 189 00:11:13,740 --> 00:11:18,740 ‫So this then catches like any URL that is not matched 190 00:11:19,170 --> 00:11:21,030 ‫by our routes. 191 00:11:21,030 --> 00:11:24,153 ‫So let's say this one, and then we get not found, 192 00:11:24,990 --> 00:11:26,910 ‫which makes sense because none 193 00:11:26,910 --> 00:11:30,360 ‫of our routes really match this URL here. 194 00:11:30,360 --> 00:11:33,780 ‫But of course, if we go back, let's say to the route, 195 00:11:33,780 --> 00:11:35,583 ‫then we get back to our homepage. 196 00:11:36,570 --> 00:11:40,830 ‫Great, so at this point, we have basically half 197 00:11:40,830 --> 00:11:43,290 ‫of the single page application. 198 00:11:43,290 --> 00:11:46,440 ‫So we already have all our routes, but at this point, 199 00:11:46,440 --> 00:11:50,700 ‫we cannot really transition from them without a page reload. 200 00:11:50,700 --> 00:11:54,480 ‫So all we are doing here is to manually change the URL 201 00:11:54,480 --> 00:11:57,690 ‫and then our application goes to that page. 202 00:11:57,690 --> 00:12:00,270 ‫But of course, that's not what we want. 203 00:12:00,270 --> 00:12:02,880 ‫So you want that single page app feeling 204 00:12:02,880 --> 00:12:06,060 ‫where we can seamlessly transition between pages. 205 00:12:06,060 --> 00:12:08,400 ‫And so that's what we will implement 206 00:12:08,400 --> 00:12:12,303 ‫in the next lecture by linking between these pages.