1 00:00:01,110 --> 00:00:04,440 ‫So let's now move back to React Router 2 00:00:04,440 --> 00:00:06,330 ‫and learn about probably 3 00:00:06,330 --> 00:00:09,750 ‫the most confusing part of declaring routes, 4 00:00:09,750 --> 00:00:11,973 ‫which are nested routes. 5 00:00:13,800 --> 00:00:17,490 ‫So we need nested routes when we want a part 6 00:00:17,490 --> 00:00:22,490 ‫of the user interface to be controlled by a part of the URL. 7 00:00:22,860 --> 00:00:26,850 ‫So in this case here, in this part of the sidebar, 8 00:00:26,850 --> 00:00:30,390 ‫right now we are showing this list of cities. 9 00:00:30,390 --> 00:00:33,180 ‫And so notice how here in the URL, 10 00:00:33,180 --> 00:00:36,870 ‫we have slash app and then slash cities. 11 00:00:36,870 --> 00:00:40,950 ‫And so basically this cities part here is displayed 12 00:00:40,950 --> 00:00:44,130 ‫because in the URL we have cities. 13 00:00:44,130 --> 00:00:46,383 ‫So watch what happens when we click here. 14 00:00:47,460 --> 00:00:50,820 ‫So you see that now this last part of the URL 15 00:00:50,820 --> 00:00:52,650 ‫has changed to countries. 16 00:00:52,650 --> 00:00:55,680 ‫And so then we are displaying this list of countries here. 17 00:00:55,680 --> 00:00:59,220 ‫And the same thing happens when we click on the map. 18 00:00:59,220 --> 00:01:01,360 ‫So then here we get slash form 19 00:01:02,550 --> 00:01:04,830 ‫and nevermind the last part here. 20 00:01:04,830 --> 00:01:06,990 ‫What matters is that we got form 21 00:01:06,990 --> 00:01:10,560 ‫and so then in that case, we display this form. 22 00:01:10,560 --> 00:01:13,200 ‫And then we can go back to the cities 23 00:01:13,200 --> 00:01:15,450 ‫and then we have our cities list again 24 00:01:15,450 --> 00:01:19,410 ‫which corresponds to this part of the URL path. 25 00:01:19,410 --> 00:01:22,380 ‫So nested routes are basically to implement 26 00:01:22,380 --> 00:01:24,060 ‫exactly this behavior. 27 00:01:24,060 --> 00:01:27,450 ‫So where we show a part of the UI 28 00:01:27,450 --> 00:01:30,870 ‫based on some part of the URL. 29 00:01:30,870 --> 00:01:35,250 ‫Now note how nested routes are not simply routes 30 00:01:35,250 --> 00:01:39,420 ‫which are made up of multiple parts like this one. 31 00:01:39,420 --> 00:01:43,230 ‫So just because we have a longer path with these two parts, 32 00:01:43,230 --> 00:01:45,870 ‫this doesn't make it a nested route. 33 00:01:45,870 --> 00:01:48,960 ‫Instead this is actually a nested route 34 00:01:48,960 --> 00:01:52,830 ‫because this path here influences what component 35 00:01:52,830 --> 00:01:55,890 ‫is rendered inside this bigger component. 36 00:01:55,890 --> 00:01:58,740 ‫So in this case, this city list is rendered 37 00:01:58,740 --> 00:02:01,953 ‫inside this big app layout component. 38 00:02:02,910 --> 00:02:03,810 ‫Okay? 39 00:02:03,810 --> 00:02:07,050 ‫And so now let's do that in our code, 40 00:02:07,050 --> 00:02:08,403 ‫in our own application. 41 00:02:09,720 --> 00:02:13,530 ‫So we want to now declare a couple of nested routes 42 00:02:13,530 --> 00:02:16,863 ‫and we do that basically inside a route element. 43 00:02:17,940 --> 00:02:22,200 ‫So in this case, let's come to this route here for the app 44 00:02:22,200 --> 00:02:25,470 ‫which is this first part of the URL here. 45 00:02:25,470 --> 00:02:30,470 ‫And so now it's as simple as removing this closing part 46 00:02:32,520 --> 00:02:36,210 ‫and then closing the route element like this 47 00:02:36,210 --> 00:02:40,230 ‫so that now we can create some nested routes in here. 48 00:02:40,230 --> 00:02:43,923 ‫So basically, child routes of this parent route. 49 00:02:45,660 --> 00:02:50,660 ‫So let's do that and let's use the path of cities. 50 00:02:54,450 --> 00:02:57,120 ‫So exactly what we have right there. 51 00:02:57,120 --> 00:03:00,840 ‫And then the element that we want to display here 52 00:03:00,840 --> 00:03:03,870 ‫doesn't actually need to be a component. 53 00:03:03,870 --> 00:03:07,500 ‫So really this is just any JSX element. 54 00:03:07,500 --> 00:03:10,200 ‫So we can just for now create some paragraph here 55 00:03:10,200 --> 00:03:13,113 ‫until we have that city list component. 56 00:03:14,280 --> 00:03:19,080 ‫So let's just write list of cities here 57 00:03:19,080 --> 00:03:21,903 ‫and then let's close this route as always, 58 00:03:22,830 --> 00:03:25,500 ‫give it a safe and then let's do another one. 59 00:03:25,500 --> 00:03:28,203 ‫So another child route. 60 00:03:29,340 --> 00:03:33,663 ‫And let's use the countries path here. 61 00:03:34,830 --> 00:03:36,150 ‫And then let's display again 62 00:03:36,150 --> 00:03:41,150 ‫just a simple paragraph like this. 63 00:03:42,930 --> 00:03:46,560 ‫And notice how here in the path description 64 00:03:46,560 --> 00:03:49,770 ‫we actually don't have to include the parent path. 65 00:03:49,770 --> 00:03:51,960 ‫So React Router is smart enough 66 00:03:51,960 --> 00:03:54,123 ‫to basically combine these two. 67 00:03:55,650 --> 00:04:00,650 ‫Okay and now let's just create one more for the form. 68 00:04:05,730 --> 00:04:10,503 ‫And again, just a very simple paragraph right here. 69 00:04:11,910 --> 00:04:14,610 ‫Now just close this route. 70 00:04:14,610 --> 00:04:16,920 ‫And with this for now, we are done. 71 00:04:16,920 --> 00:04:20,880 ‫So we now have our three children routes here 72 00:04:20,880 --> 00:04:23,370 ‫and with this we are actually done. 73 00:04:23,370 --> 00:04:26,580 ‫So we have defined three child routes 74 00:04:26,580 --> 00:04:29,280 ‫of this app route right here. 75 00:04:29,280 --> 00:04:32,520 ‫But now where are these elements, 76 00:04:32,520 --> 00:04:34,380 ‫like this one or this one, 77 00:04:34,380 --> 00:04:37,590 ‫actually going to be displayed in the UI? 78 00:04:37,590 --> 00:04:38,790 ‫Or in other words, 79 00:04:38,790 --> 00:04:42,600 ‫how are we now actually going to display one component 80 00:04:42,600 --> 00:04:45,693 ‫or one element inside another component? 81 00:04:46,620 --> 00:04:49,680 ‫Well, that's where the outlet component provided 82 00:04:49,680 --> 00:04:52,800 ‫by React Router comes into play. 83 00:04:52,800 --> 00:04:56,673 ‫So where do we actually want to display these elements? 84 00:04:57,540 --> 00:05:00,720 ‫Well, they should be inside the sidebar. 85 00:05:00,720 --> 00:05:04,770 ‫So right here instead of this hard coded paragraph 86 00:05:04,770 --> 00:05:05,913 ‫that I created here. 87 00:05:06,870 --> 00:05:10,170 ‫And so in this place is where we are now 88 00:05:10,170 --> 00:05:12,633 ‫going to use that outlet element. 89 00:05:14,490 --> 00:05:19,020 ‫So let's give it a safe, let's check this out, 90 00:05:19,020 --> 00:05:23,010 ‫and then I will explain exactly what has happened here. 91 00:05:23,010 --> 00:05:25,800 ‫So as we reload, we see nothing here 92 00:05:25,800 --> 00:05:29,283 ‫but then let's try to manually write cities. 93 00:05:30,240 --> 00:05:32,670 ‫And there it is. 94 00:05:32,670 --> 00:05:35,370 ‫So there is our list of cities paragraph 95 00:05:35,370 --> 00:05:40,370 ‫that we defined right here for this children route. 96 00:05:41,220 --> 00:05:44,070 ‫So for this nested cities route. 97 00:05:44,070 --> 00:05:47,130 ‫So let's see what actually happened here. 98 00:05:47,130 --> 00:05:50,400 ‫So React Router saw this URL here 99 00:05:50,400 --> 00:05:52,530 ‫made out of these two parts. 100 00:05:52,530 --> 00:05:55,470 ‫And so first it saw the app part 101 00:05:55,470 --> 00:05:58,950 ‫and so that then matched this route right here. 102 00:05:58,950 --> 00:06:00,540 ‫But then the Router noticed 103 00:06:00,540 --> 00:06:03,030 ‫that there's also this cities part, 104 00:06:03,030 --> 00:06:06,840 ‫and so then it went into these nested routes. 105 00:06:06,840 --> 00:06:09,090 ‫And so then of these three here 106 00:06:09,090 --> 00:06:11,670 ‫it selected the first one to be rendered. 107 00:06:11,670 --> 00:06:15,780 ‫And so then it did basically render this part. 108 00:06:15,780 --> 00:06:18,600 ‫And where did it render this part? 109 00:06:18,600 --> 00:06:23,070 ‫Well, it placed it right here into the outlet element. 110 00:06:23,070 --> 00:06:25,110 ‫And so this is actually pretty similar 111 00:06:25,110 --> 00:06:27,933 ‫to the children prop if we think about this. 112 00:06:29,250 --> 00:06:32,760 ‫So it's similar to this right here whenever we pass 113 00:06:32,760 --> 00:06:36,510 ‫some element inside another element in JSX, 114 00:06:36,510 --> 00:06:38,610 ‫with the difference that here we are not 115 00:06:38,610 --> 00:06:40,860 ‫using elements but routes. 116 00:06:40,860 --> 00:06:43,980 ‫And so of course the children prop is not going to work 117 00:06:43,980 --> 00:06:46,200 ‫but instead we use something similar, 118 00:06:46,200 --> 00:06:48,243 ‫which is the outlet element. 119 00:06:49,260 --> 00:06:52,233 ‫So of course if we now change this to form, 120 00:06:53,820 --> 00:06:56,700 ‫so not from but form, 121 00:06:56,700 --> 00:06:59,283 ‫then we get the form element here. 122 00:07:00,369 --> 00:07:01,202 ‫Now okay? 123 00:07:02,490 --> 00:07:04,890 ‫But watch what happens when we just go back 124 00:07:04,890 --> 00:07:06,990 ‫to this normal route here. 125 00:07:06,990 --> 00:07:10,290 ‫So without specifying any of the nested routes, 126 00:07:10,290 --> 00:07:15,290 ‫well then our sidebar is empty, which is not what we want. 127 00:07:15,390 --> 00:07:17,763 ‫So here when we come just to app- 128 00:07:18,870 --> 00:07:20,343 ‫that didn't work. 129 00:07:22,890 --> 00:07:27,120 ‫But anyway, in this application, when we come just to app 130 00:07:27,120 --> 00:07:31,683 ‫then we want to show by default also this city list here. 131 00:07:33,510 --> 00:07:36,060 ‫So we can actually do that 132 00:07:36,060 --> 00:07:38,793 ‫with something called an index route. 133 00:07:40,110 --> 00:07:42,330 ‫So let's add that here. 134 00:07:42,330 --> 00:07:44,880 ‫And so an index route is basically 135 00:07:44,880 --> 00:07:48,120 ‫the default child route that is going to be matched 136 00:07:48,120 --> 00:07:51,810 ‫if none of these other routes here matches. 137 00:07:51,810 --> 00:07:53,940 ‫So right now, that is the case here 138 00:07:53,940 --> 00:07:58,860 ‫because basically we have nothing after that app path. 139 00:07:58,860 --> 00:08:01,260 ‫So then none of these is matched. 140 00:08:01,260 --> 00:08:05,760 ‫And so, let's basically create a default here. 141 00:08:05,760 --> 00:08:09,840 ‫So we call that index and as we just said, 142 00:08:09,840 --> 00:08:11,340 ‫here we want to again 143 00:08:11,340 --> 00:08:15,630 ‫display the paragraph of list of cities. 144 00:08:15,630 --> 00:08:18,360 ‫But it could be anything else really. 145 00:08:18,360 --> 00:08:20,283 ‫So let's just try that for now. 146 00:08:21,390 --> 00:08:25,980 ‫And, I again forgot to close this route element, 147 00:08:25,980 --> 00:08:30,693 ‫but in any case, now you see that we see this list here. 148 00:08:31,530 --> 00:08:34,533 ‫And so that's because now of this index route. 149 00:08:36,150 --> 00:08:40,223 ‫But now let's go back to list of cities 150 00:08:41,880 --> 00:08:43,830 ‫and so then this list of cities, 151 00:08:43,830 --> 00:08:46,380 ‫which will later be its own component, 152 00:08:46,380 --> 00:08:50,610 ‫will be the default here as soon as we open the application. 153 00:08:50,610 --> 00:08:54,480 ‫And we could actually do the same thing with our homepage. 154 00:08:54,480 --> 00:08:56,220 ‫So if we come here, 155 00:08:56,220 --> 00:09:01,220 ‫we can remove this path and also make this an index route. 156 00:09:01,260 --> 00:09:03,930 ‫And so if we now reload the application 157 00:09:03,930 --> 00:09:08,370 ‫then you see that by default it goes here to our homepage. 158 00:09:08,370 --> 00:09:09,750 ‫And now to finish, 159 00:09:09,750 --> 00:09:12,210 ‫we want of course a way of moving 160 00:09:12,210 --> 00:09:14,610 ‫between these different nested routes 161 00:09:14,610 --> 00:09:19,233 ‫instead of having to manually write them here, right? 162 00:09:20,610 --> 00:09:23,073 ‫So like this. 163 00:09:24,030 --> 00:09:26,310 ‫So basically we want now to implement 164 00:09:26,310 --> 00:09:28,593 ‫this app navigation component. 165 00:09:29,550 --> 00:09:31,803 ‫So let's go open that. 166 00:09:32,841 --> 00:09:36,303 ‫And here we already have our styles. 167 00:09:37,290 --> 00:09:40,770 ‫And so now all we need is this unordered list 168 00:09:40,770 --> 00:09:45,573 ‫and then just like before a list of some Nav links, 169 00:09:46,650 --> 00:09:49,800 ‫which are again provided by React Router, 170 00:09:49,800 --> 00:09:51,840 ‫and now here we can just specify 171 00:09:51,840 --> 00:09:56,370 ‫exactly the path that we specified in our nested routes. 172 00:09:56,370 --> 00:10:01,370 ‫So cities, yeah, then let's to another one here. 173 00:10:06,630 --> 00:10:11,630 ‫So another Nav link in this one here to countries. 174 00:10:12,540 --> 00:10:17,540 ‫So again, repeating exactly the path that we specified here. 175 00:10:20,670 --> 00:10:25,153 ‫Okay, so countries, and there we go. 176 00:10:27,570 --> 00:10:30,990 ‫And since we are using this Nav link here, 177 00:10:30,990 --> 00:10:34,410 ‫then the element that is currently active 178 00:10:34,410 --> 00:10:36,840 ‫automatically gets the active class. 179 00:10:36,840 --> 00:10:38,010 ‫Remember that? 180 00:10:38,010 --> 00:10:40,350 ‫And so in order to style that, 181 00:10:40,350 --> 00:10:42,963 ‫we already have some code here again, 182 00:10:43,830 --> 00:10:46,983 ‫which does that styling of the active class. 183 00:10:48,300 --> 00:10:49,133 ‫Alright? 184 00:10:49,133 --> 00:10:51,870 ‫And so now as we click on these different links 185 00:10:51,870 --> 00:10:54,570 ‫then you see it moves to countries 186 00:10:54,570 --> 00:10:57,270 ‫and here goes back to list of cities. 187 00:10:57,270 --> 00:10:59,940 ‫And for the form I won't add a link here 188 00:10:59,940 --> 00:11:02,730 ‫because later on that will actually open 189 00:11:02,730 --> 00:11:04,890 ‫as soon as we click on the map here. 190 00:11:04,890 --> 00:11:08,100 ‫So that's not part of this navigation. 191 00:11:08,100 --> 00:11:09,810 ‫Now if we think about this, 192 00:11:09,810 --> 00:11:11,970 ‫then what we just implemented here 193 00:11:11,970 --> 00:11:16,380 ‫is actually very similar to something like a tabs component, 194 00:11:16,380 --> 00:11:19,710 ‫but implemented in a very different way. 195 00:11:19,710 --> 00:11:23,490 ‫So before, if we wanted to implement a tab component 196 00:11:23,490 --> 00:11:25,410 ‫where we have these tabs here 197 00:11:25,410 --> 00:11:27,450 ‫and then the content changes 198 00:11:27,450 --> 00:11:29,850 ‫according to which is the active tab, 199 00:11:29,850 --> 00:11:33,180 ‫we would've implemented that using the U state hook 200 00:11:33,180 --> 00:11:36,000 ‫to manage the currently active tab. 201 00:11:36,000 --> 00:11:39,270 ‫But here with React Router, we do the same thing, 202 00:11:39,270 --> 00:11:41,520 ‫but in a very different way. 203 00:11:41,520 --> 00:11:45,570 ‫So instead of using the U state hook to manage state, 204 00:11:45,570 --> 00:11:47,820 ‫we basically allow React Router 205 00:11:47,820 --> 00:11:52,230 ‫enter URL to store that state of the active tab. 206 00:11:52,230 --> 00:11:55,080 ‫And so then whenever this URL here changes, 207 00:11:55,080 --> 00:11:58,680 ‫then we change which tab is currently active. 208 00:11:58,680 --> 00:12:01,470 ‫So React Router is a whole new way 209 00:12:01,470 --> 00:12:05,100 ‫of thinking about how we built an application. 210 00:12:05,100 --> 00:12:07,740 ‫Now of course that doesn't mean at all 211 00:12:07,740 --> 00:12:11,100 ‫that all we have learned before is useless. 212 00:12:11,100 --> 00:12:14,190 ‫So we still build components like accordions 213 00:12:14,190 --> 00:12:17,700 ‫or tabbed components like the one I just mentioned 214 00:12:17,700 --> 00:12:20,610 ‫using the U state hook all the time. 215 00:12:20,610 --> 00:12:24,390 ‫But from now on, the overall navigation of the application 216 00:12:24,390 --> 00:12:27,180 ‫is in the real world always managed 217 00:12:27,180 --> 00:12:29,610 ‫by something like React Router. 218 00:12:29,610 --> 00:12:34,170 ‫And so that includes a small sub navigation like this one. 219 00:12:34,170 --> 00:12:36,900 ‫So hopefully this wasn't too confusing 220 00:12:36,900 --> 00:12:40,170 ‫but just make sure to review all we just did. 221 00:12:40,170 --> 00:12:43,620 ‫So how we implemented our nested routes here 222 00:12:43,620 --> 00:12:46,650 ‫inside another route element. 223 00:12:46,650 --> 00:12:49,770 ‫Then we rendered whatever the nested route 224 00:12:49,770 --> 00:12:54,770 ‫wants to render inside the outlet component here. 225 00:12:55,530 --> 00:12:58,710 ‫And then to actually switch between the nested routes 226 00:12:58,710 --> 00:13:01,710 ‫we implemented yet another navigation 227 00:13:01,710 --> 00:13:05,490 ‫with these Nav link components to basically link 228 00:13:05,490 --> 00:13:07,620 ‫between the different URLs, 229 00:13:07,620 --> 00:13:11,070 ‫which in this case are these sub URLs. 230 00:13:11,070 --> 00:13:14,373 ‫So with the sub routes of cities and countries. 231 00:13:15,210 --> 00:13:16,043 ‫Okay. 232 00:13:16,043 --> 00:13:18,330 ‫And so once that is crystal clear 233 00:13:18,330 --> 00:13:20,730 ‫let's move on to actually implement 234 00:13:20,730 --> 00:13:22,443 ‫this list of cities here.