1 00:00:01,080 --> 00:00:02,400 ‫So we learned about 2 00:00:02,400 --> 00:00:04,590 ‫how to programmatically navigate 3 00:00:04,590 --> 00:00:06,930 ‫using the useNavigate hook, 4 00:00:06,930 --> 00:00:10,770 ‫but there is also a declarative way of doing that. 5 00:00:10,770 --> 00:00:14,283 ‫And so let's now check out the Navigate component. 6 00:00:15,780 --> 00:00:18,000 ‫Now, since we have React hooks, 7 00:00:18,000 --> 00:00:21,390 ‫the Navigate component that we're going to learn about now 8 00:00:21,390 --> 00:00:23,820 ‫is not so much used anymore, 9 00:00:23,820 --> 00:00:27,390 ‫but there is still one very important use case for it, 10 00:00:27,390 --> 00:00:30,690 ‫which is inside nested routes. 11 00:00:30,690 --> 00:00:32,973 ‫So let me show you what I mean by that. 12 00:00:34,320 --> 00:00:36,660 ‫So let's come all the way back 13 00:00:36,660 --> 00:00:38,610 ‫to the beginning here, 14 00:00:38,610 --> 00:00:41,550 ‫and then let's go to our application. 15 00:00:41,550 --> 00:00:46,550 ‫And so, notice, how right now, we are not in app/cities. 16 00:00:46,740 --> 00:00:48,330 ‫And so that's why here, 17 00:00:48,330 --> 00:00:51,360 ‫then this button, is actually not selected. 18 00:00:51,360 --> 00:00:52,860 ‫While if we click here, 19 00:00:52,860 --> 00:00:55,920 ‫only then we move here to /cities 20 00:00:55,920 --> 00:00:59,130 ‫and it gets activated here as well. 21 00:00:59,130 --> 00:01:00,810 ‫So in order to fix this, 22 00:01:00,810 --> 00:01:04,200 ‫we can now basically use the Navigate component 23 00:01:04,200 --> 00:01:07,800 ‫to immediately navigate to this URL. 24 00:01:07,800 --> 00:01:09,753 ‫So let me show you how. 25 00:01:11,310 --> 00:01:14,940 ‫So, right now, we have both the index route 26 00:01:14,940 --> 00:01:19,260 ‫and the cities route pointing to the exact same element. 27 00:01:19,260 --> 00:01:22,860 ‫So both of them simply include the CityList. 28 00:01:22,860 --> 00:01:26,340 ‫But here, in the index route, let's now change that, 29 00:01:26,340 --> 00:01:30,750 ‫and let's instead use the Navigate component 30 00:01:30,750 --> 00:01:33,423 ‫that react-router-dom gives us. 31 00:01:34,740 --> 00:01:37,470 ‫And so then here, just like in the links, 32 00:01:37,470 --> 00:01:40,950 ‫we can specify the to prop. 33 00:01:40,950 --> 00:01:45,570 ‫And so then, as you can guess, let's write cities. 34 00:01:45,570 --> 00:01:49,230 ‫And so this is then basically like a redirect. 35 00:01:49,230 --> 00:01:52,290 ‫So you can think of this Navigate component here 36 00:01:52,290 --> 00:01:54,570 ‫also like a redirect. 37 00:01:54,570 --> 00:01:57,450 ‫So as soon as the index route is hit, 38 00:01:57,450 --> 00:02:02,010 ‫it will then basically redirect us to the cities route, 39 00:02:02,010 --> 00:02:04,650 ‫which is this one right here. 40 00:02:04,650 --> 00:02:08,670 ‫And so, if we go back again and click now, 41 00:02:08,670 --> 00:02:11,970 ‫then immediately we got redirected 42 00:02:11,970 --> 00:02:14,280 ‫to the place that we wanted. 43 00:02:14,280 --> 00:02:16,890 ‫So immediately now we have cities. 44 00:02:16,890 --> 00:02:19,803 ‫And here, of course, it is marked as active. 45 00:02:20,640 --> 00:02:23,370 ‫Now, the problem is when we want to go back here. 46 00:02:23,370 --> 00:02:26,160 ‫Because notice how as we click here, 47 00:02:26,160 --> 00:02:27,780 ‫nothing really happens. 48 00:02:27,780 --> 00:02:29,010 ‫And so to fix that, 49 00:02:29,010 --> 00:02:32,700 ‫here we need to add the replace keyword. 50 00:02:32,700 --> 00:02:34,350 ‫Because this will then replace 51 00:02:34,350 --> 00:02:37,233 ‫the current element in the history stack. 52 00:02:38,820 --> 00:02:40,080 ‫All right. 53 00:02:40,080 --> 00:02:41,703 ‫So let's try that again. 54 00:02:42,660 --> 00:02:43,830 ‫And here we are. 55 00:02:43,830 --> 00:02:45,690 ‫And if we want to move back, 56 00:02:45,690 --> 00:02:48,390 ‫then we are back to where we were before. 57 00:02:48,390 --> 00:02:50,520 ‫And that's actually it. 58 00:02:50,520 --> 00:02:53,370 ‫So I think this is the main use case right now 59 00:02:53,370 --> 00:02:55,620 ‫for this Navigate element, 60 00:02:55,620 --> 00:02:57,510 ‫but still, keep this in mind here 61 00:02:57,510 --> 00:03:00,180 ‫as you might need it in other situations. 62 00:03:00,180 --> 00:03:01,830 ‫So basically situations 63 00:03:01,830 --> 00:03:04,950 ‫where you cannot use the Navigate function 64 00:03:04,950 --> 00:03:07,440 ‫coming from the useNavigate hook. 65 00:03:07,440 --> 00:03:10,050 ‫So in this case here, that wouldn't really work. 66 00:03:10,050 --> 00:03:13,350 ‫And so then, we use this more declarative way. 67 00:03:13,350 --> 00:03:18,000 ‫So declarative because we just declare this in our JSX 68 00:03:18,000 --> 00:03:21,240 ‫that we want to basically navigate 69 00:03:21,240 --> 00:03:24,330 ‫or to redirect to this other URL here. 70 00:03:24,330 --> 00:03:26,280 ‫While with the Navigate function, 71 00:03:26,280 --> 00:03:28,380 ‫it is really an imperative way 72 00:03:28,380 --> 00:03:31,470 ‫where we really tell our JavaScript code 73 00:03:31,470 --> 00:03:34,830 ‫that we want to go to that other URL. 74 00:03:34,830 --> 00:03:37,890 ‫Now, okay, and so that does it for this video, 75 00:03:37,890 --> 00:03:41,670 ‫and actually, we even finished this section. 76 00:03:41,670 --> 00:03:45,420 ‫So we will keep working on this project in the next section, 77 00:03:45,420 --> 00:03:48,930 ‫but now we are ready to add something called context 78 00:03:48,930 --> 00:03:50,640 ‫to this project. 79 00:03:50,640 --> 00:03:51,810 ‫And so to do that, 80 00:03:51,810 --> 00:03:54,420 ‫we first need to learn about what that is 81 00:03:54,420 --> 00:03:56,490 ‫in a small intermediate project 82 00:03:56,490 --> 00:03:58,590 ‫before coming back to this one. 83 00:03:58,590 --> 00:04:01,950 ‫And so, let's now move on to the next section, 84 00:04:01,950 --> 00:04:05,250 ‫which is going to be all about that context API 85 00:04:05,250 --> 00:04:06,750 ‫that I just mentioned there. 86 00:04:06,750 --> 00:04:09,813 ‫So hopefully, I see you back there very soon.