1 00:00:01,140 --> 00:00:02,070 ‫Next up, 2 00:00:02,070 --> 00:00:04,950 ‫let's learn about programmatic navigation 3 00:00:04,950 --> 00:00:07,623 ‫with the use navigate custom hook. 4 00:00:09,180 --> 00:00:12,330 ‫So programmatic navigation basically means 5 00:00:12,330 --> 00:00:14,490 ‫to move to a new URL 6 00:00:14,490 --> 00:00:18,300 ‫without the user having to click on any link. 7 00:00:18,300 --> 00:00:20,524 ‫And a common use case of this behavior 8 00:00:20,524 --> 00:00:23,730 ‫is right after submitting a form. 9 00:00:23,730 --> 00:00:27,120 ‫So many times when the user submits a form, 10 00:00:27,120 --> 00:00:29,310 ‫we want them to move to a new page 11 00:00:29,310 --> 00:00:31,860 ‫in our application automatically. 12 00:00:31,860 --> 00:00:34,560 ‫So without having to click on any link. 13 00:00:34,560 --> 00:00:37,530 ‫And so then we can use programmatic navigation 14 00:00:37,530 --> 00:00:39,180 ‫to achieve that. 15 00:00:39,180 --> 00:00:42,360 ‫So I'm sure you have seen that many times in action 16 00:00:42,360 --> 00:00:45,210 ‫in some web applications that you have used. 17 00:00:45,210 --> 00:00:49,427 ‫And so now let's do something like this here on our own. 18 00:00:49,427 --> 00:00:51,862 ‫Now in this example, what I want to do 19 00:00:51,862 --> 00:00:55,950 ‫is that whenever the user clicks somewhere here 20 00:00:55,950 --> 00:00:57,480 ‫in this map container, 21 00:00:57,480 --> 00:01:01,020 ‫we then want to move automatically here 22 00:01:01,020 --> 00:01:03,120 ‫to the form component. 23 00:01:03,120 --> 00:01:04,590 ‫So this is not the use case 24 00:01:04,590 --> 00:01:06,240 ‫that I explained in the beginning, 25 00:01:06,240 --> 00:01:07,714 ‫so after submitting a form, 26 00:01:07,714 --> 00:01:11,400 ‫because by now we don't have any form yet 27 00:01:11,400 --> 00:01:13,080 ‫but we will do that later. 28 00:01:13,080 --> 00:01:16,140 ‫But for now, let's just implement what I just said. 29 00:01:16,140 --> 00:01:20,640 ‫So clicking here will then move right here 30 00:01:20,640 --> 00:01:22,890 ‫to the form component. 31 00:01:22,890 --> 00:01:26,340 ‫And clicking here cannot really happen with a link. 32 00:01:26,340 --> 00:01:29,609 ‫And so that's why we need programmatic navigation. 33 00:01:29,609 --> 00:01:33,543 ‫But first of all, let's set up our route correctly. 34 00:01:34,860 --> 00:01:38,640 ‫So right here we have form already 35 00:01:38,640 --> 00:01:41,070 ‫so we have our nested form route. 36 00:01:41,070 --> 00:01:45,660 ‫But now here we actually want to include the form component. 37 00:01:45,660 --> 00:01:48,257 ‫And this form actually has been giving to us 38 00:01:48,257 --> 00:01:50,914 ‫already in the starter data. 39 00:01:50,914 --> 00:01:55,592 ‫So we already have that in our files. 40 00:01:55,592 --> 00:01:58,562 ‫Let's just make sure that it has been included, 41 00:01:58,562 --> 00:02:03,125 ‫and well, actually, this is not the one that we want. 42 00:02:03,125 --> 00:02:07,350 ‫So it included this one from React Router Dom, 43 00:02:07,350 --> 00:02:09,213 ‫but we want our own one. 44 00:02:12,750 --> 00:02:13,920 ‫So form, 45 00:02:13,920 --> 00:02:16,710 ‫and so that's this one right here. 46 00:02:16,710 --> 00:02:19,860 ‫So you see it already has all the input fields 47 00:02:19,860 --> 00:02:22,770 ‫even linked up with the state here 48 00:02:22,770 --> 00:02:25,260 ‫so that we don't have to do that manually again 49 00:02:25,260 --> 00:02:29,043 ‫because at this point we already know how that works. 50 00:02:29,043 --> 00:02:31,683 ‫And so let's see, 51 00:02:32,700 --> 00:02:35,370 ‫yeah, this is now correctly linked. 52 00:02:35,370 --> 00:02:37,050 ‫And so if we come back here, 53 00:02:37,050 --> 00:02:40,020 ‫and then type form, 54 00:02:40,020 --> 00:02:41,340 ‫let's see, 55 00:02:41,340 --> 00:02:42,874 ‫and beautiful. 56 00:02:42,874 --> 00:02:45,540 ‫So here we have our form, 57 00:02:45,540 --> 00:02:50,310 ‫but at this point we have no way of moving to this URL. 58 00:02:50,310 --> 00:02:53,460 ‫And so again, we now want that to happen 59 00:02:53,460 --> 00:02:56,463 ‫when the user clicks somewhere on the map here. 60 00:02:57,750 --> 00:02:59,610 ‫So let's do that. 61 00:02:59,610 --> 00:03:04,593 ‫And so let's attach an event handler here on click. 62 00:03:05,910 --> 00:03:08,373 ‫Add then here our function. 63 00:03:10,020 --> 00:03:10,980 ‫Okay. 64 00:03:10,980 --> 00:03:13,050 ‫And we will finish this function later 65 00:03:13,050 --> 00:03:15,210 ‫because before we can keep going, 66 00:03:15,210 --> 00:03:19,383 ‫we now need to actually use the use navigate hook. 67 00:03:20,490 --> 00:03:24,323 ‫So another hook that is provided by React Router, 68 00:03:24,323 --> 00:03:27,573 ‫so use navigate, 69 00:03:28,650 --> 00:03:30,060 ‫and all this one does 70 00:03:30,060 --> 00:03:35,060 ‫is to return a function called navigate like this. 71 00:03:35,250 --> 00:03:37,920 ‫And so then we can use this function here 72 00:03:37,920 --> 00:03:40,680 ‫to basically move to any URL. 73 00:03:40,680 --> 00:03:43,083 ‫So we just need to call that here. 74 00:03:44,490 --> 00:03:49,432 ‫And so let's say we want to move to the form and that's it. 75 00:03:49,432 --> 00:03:52,350 ‫So let's go somewhere else. 76 00:03:52,350 --> 00:03:55,110 ‫At least it should be here in the app. 77 00:03:55,110 --> 00:03:56,970 ‫And so now let's see what happens 78 00:03:56,970 --> 00:03:58,668 ‫when I click somewhere here. 79 00:03:58,668 --> 00:04:02,520 ‫And indeed, it did move to the form. 80 00:04:02,520 --> 00:04:05,850 ‫So without us having to click on any link. 81 00:04:05,850 --> 00:04:08,730 ‫So this is programmatic navigation 82 00:04:08,730 --> 00:04:11,304 ‫where we basically in an imperative way 83 00:04:11,304 --> 00:04:13,353 ‫navigate to this URL. 84 00:04:14,670 --> 00:04:17,910 ‫So here, in enough, we do that also. 85 00:04:17,910 --> 00:04:20,190 ‫So we also navigate to another page, 86 00:04:20,190 --> 00:04:22,260 ‫but in a declarative way 87 00:04:22,260 --> 00:04:25,440 ‫because we just declare this component in our JSX 88 00:04:25,440 --> 00:04:27,390 ‫and that will then do the work 89 00:04:27,390 --> 00:04:31,110 ‫of navigating to the city's URL for us. 90 00:04:31,110 --> 00:04:35,010 ‫But in this case, again, we do it in an imperative way 91 00:04:35,010 --> 00:04:38,310 ‫because we cannot use the link in this situation. 92 00:04:38,310 --> 00:04:41,300 ‫And the same again after submitting a form. 93 00:04:41,300 --> 00:04:45,900 ‫So then we would have to also call this navigate function. 94 00:04:45,900 --> 00:04:48,153 ‫And so we will do that later. 95 00:04:48,153 --> 00:04:52,770 ‫So this is one use case of the navigate function 96 00:04:52,770 --> 00:04:55,080 ‫but we can also do something else 97 00:04:55,080 --> 00:04:57,870 ‫which is to simply navigate back, 98 00:04:57,870 --> 00:04:59,340 ‫which is in fact something 99 00:04:59,340 --> 00:05:01,834 ‫that we cannot do just with links. 100 00:05:01,834 --> 00:05:06,123 ‫So let's try that out by coming here to the form. 101 00:05:06,990 --> 00:05:11,610 ‫And so here we actually have a button to go back. 102 00:05:11,610 --> 00:05:14,573 ‫And so now we want to implement that functionality. 103 00:05:14,573 --> 00:05:16,350 ‫But before we do that, 104 00:05:16,350 --> 00:05:20,794 ‫I now want to create actually a reusable button component. 105 00:05:20,794 --> 00:05:23,253 ‫So let's create a new file here, 106 00:05:26,310 --> 00:05:28,675 ‫button.JSX. 107 00:05:28,675 --> 00:05:33,675 ‫And here it is now a button element. 108 00:05:34,380 --> 00:05:37,020 ‫And then let's see what we need here as props. 109 00:05:37,020 --> 00:05:38,970 ‫So we need the children prop 110 00:05:38,970 --> 00:05:41,380 ‫so that we can pass in some content. 111 00:05:41,380 --> 00:05:46,080 ‫Then, we also need to accept the on click prop. 112 00:05:46,080 --> 00:05:50,670 ‫And finally, here, I also want to accept a type string. 113 00:05:50,670 --> 00:05:52,350 ‫And so using that type, 114 00:05:52,350 --> 00:05:56,121 ‫I then want to conditionally add a CSS class. 115 00:05:56,121 --> 00:06:00,720 ‫But let me show that to you in the end. 116 00:06:00,720 --> 00:06:03,360 ‫So first, let's do our typical things, 117 00:06:03,360 --> 00:06:07,140 ‫which is to allow the user 118 00:06:07,140 --> 00:06:11,523 ‫to attach an on click event handler to this button. 119 00:06:12,960 --> 00:06:13,793 ‫Okay. 120 00:06:13,793 --> 00:06:17,520 ‫Then we also need to get in our styles. 121 00:06:17,520 --> 00:06:21,633 ‫And then let's add the class name here, 122 00:06:23,640 --> 00:06:25,443 ‫styles.btn. 123 00:06:27,860 --> 00:06:28,980 ‫Okay. 124 00:06:28,980 --> 00:06:33,980 ‫So let's come back here and use that button. 125 00:06:39,930 --> 00:06:42,352 ‫And for now, we don't pass in here 126 00:06:42,352 --> 00:06:46,868 ‫the on click event handler as we will do that later. 127 00:06:46,868 --> 00:06:51,868 ‫So here we got some styling already, but that is not enough. 128 00:06:52,020 --> 00:06:57,020 ‫So let's come here to the CSS module for the button. 129 00:06:57,030 --> 00:06:59,640 ‫And notice that besides the button class, 130 00:06:59,640 --> 00:07:02,490 ‫we have these three other classes. 131 00:07:02,490 --> 00:07:05,070 ‫And so now we want to allow the user 132 00:07:05,070 --> 00:07:08,168 ‫to pass in a type which can be either primary 133 00:07:08,168 --> 00:07:10,530 ‫or back or position. 134 00:07:10,530 --> 00:07:11,910 ‫And then according to that, 135 00:07:11,910 --> 00:07:14,064 ‫we will add the corresponding class. 136 00:07:14,064 --> 00:07:16,931 ‫So what I mean is this. 137 00:07:16,931 --> 00:07:21,931 ‫So instead of now manually passing in here a class name, 138 00:07:22,350 --> 00:07:24,330 ‫we just pass in a string 139 00:07:24,330 --> 00:07:26,558 ‫with the type of button that we want. 140 00:07:26,558 --> 00:07:29,460 ‫So here we want a primary button. 141 00:07:29,460 --> 00:07:31,451 ‫And so then, here we receive that 142 00:07:31,451 --> 00:07:35,310 ‫inside the button as the type, 143 00:07:35,310 --> 00:07:39,240 ‫and then we will use that as a class name here. 144 00:07:39,240 --> 00:07:43,560 ‫So, this means that now we need to add two class names. 145 00:07:43,560 --> 00:07:45,672 ‫And the way we do that in CSS modules 146 00:07:45,672 --> 00:07:49,272 ‫is that we need to create a template literal. 147 00:07:49,272 --> 00:07:52,271 ‫So let's wrap this first in back ticks, 148 00:07:52,271 --> 00:07:57,030 ‫then into this curly braces. 149 00:07:57,030 --> 00:08:00,307 ‫And then here, let's do the other one. 150 00:08:00,307 --> 00:08:05,307 ‫So for example, here we could say now styles.primary 151 00:08:07,140 --> 00:08:10,710 ‫and to then all the buttons would get green like this, 152 00:08:10,710 --> 00:08:15,000 ‫because the primary is the one with the green background. 153 00:08:15,000 --> 00:08:18,750 ‫But remember that actually here we want the type. 154 00:08:18,750 --> 00:08:23,160 ‫And so, here we now need to do it like this. 155 00:08:23,160 --> 00:08:26,729 ‫And so, here we get indeed the primary type 156 00:08:26,729 --> 00:08:30,663 ‫but if we use now the back button, 157 00:08:32,820 --> 00:08:33,963 ‫so let's do that, 158 00:08:36,240 --> 00:08:38,193 ‫then we will get another style. 159 00:08:39,390 --> 00:08:41,883 ‫So type now back, 160 00:08:43,980 --> 00:08:48,980 ‫and then let's see what we get. 161 00:08:49,140 --> 00:08:51,240 ‫And beautiful. 162 00:08:51,240 --> 00:08:54,030 ‫So we basically dynamically now 163 00:08:54,030 --> 00:08:58,813 ‫selected the style that we want using this type prop string. 164 00:08:58,813 --> 00:09:00,387 ‫So let's close that. 165 00:09:00,387 --> 00:09:04,620 ‫And now finally, let's attach the on click handler here 166 00:09:04,620 --> 00:09:05,880 ‫so that we can again 167 00:09:05,880 --> 00:09:08,984 ‫use the navigate function right here now. 168 00:09:08,984 --> 00:09:12,843 ‫So let's include our custom hook again. 169 00:09:13,707 --> 00:09:18,123 ‫So use navigate from React Router Dom. 170 00:09:20,160 --> 00:09:23,430 ‫And by the way, this used to be called use history 171 00:09:23,430 --> 00:09:26,973 ‫in a previous version of React Router. 172 00:09:28,515 --> 00:09:32,610 ‫And so now we want to navigate back. 173 00:09:32,610 --> 00:09:34,530 ‫So how do we do that? 174 00:09:34,530 --> 00:09:36,930 ‫Well, we just need to define basically 175 00:09:36,930 --> 00:09:39,360 ‫the number of steps that we want to go back 176 00:09:39,360 --> 00:09:41,520 ‫in the browser's history. 177 00:09:41,520 --> 00:09:43,770 ‫So if we say minus one, 178 00:09:43,770 --> 00:09:47,133 ‫then that means that we basically navigate back. 179 00:09:48,690 --> 00:09:51,393 ‫So let's try that out here, 180 00:09:52,410 --> 00:09:54,240 ‫and moving to cities, 181 00:09:54,240 --> 00:09:57,510 ‫And then as I click here, that will open the form. 182 00:09:57,510 --> 00:10:01,020 ‫And so now when I click here, we should move back to cities. 183 00:10:01,020 --> 00:10:02,051 ‫Right? 184 00:10:02,051 --> 00:10:04,680 ‫Well, that didn't really work. 185 00:10:04,680 --> 00:10:08,040 ‫I mean, maybe you saw a flash of this moving back 186 00:10:08,040 --> 00:10:09,810 ‫but then it reloaded the page here again. 187 00:10:09,810 --> 00:10:11,730 ‫And so the reason for that 188 00:10:11,730 --> 00:10:15,296 ‫is that this button is located inside a form. 189 00:10:15,296 --> 00:10:17,970 ‫So we are inside a form. 190 00:10:17,970 --> 00:10:19,230 ‫And so therefore, 191 00:10:19,230 --> 00:10:22,560 ‫this will trigger the form to be submitted. 192 00:10:22,560 --> 00:10:25,295 ‫And so that will then cause the page to reload. 193 00:10:25,295 --> 00:10:30,295 ‫So what we also need to do here is to prevent default. 194 00:10:31,380 --> 00:10:33,603 ‫So we need to receive the event, 195 00:10:35,520 --> 00:10:39,370 ‫and then we need to do e.prevent default. 196 00:10:41,220 --> 00:10:44,820 ‫And so this will then prevent this button as it is clicked 197 00:10:44,820 --> 00:10:47,716 ‫to submit this form. 198 00:10:47,716 --> 00:10:50,220 ‫So let's try that again. 199 00:10:50,220 --> 00:10:52,440 ‫Clicking here will open this. 200 00:10:52,440 --> 00:10:56,670 ‫And now as we move back, we are back here in is URL. 201 00:10:56,670 --> 00:10:58,008 ‫And if I go to countries, 202 00:10:58,008 --> 00:11:01,800 ‫then click here again, and click back, 203 00:11:01,800 --> 00:11:04,260 ‫then we move back to countries. 204 00:11:04,260 --> 00:11:06,154 ‫And of course, we could also move forward 205 00:11:06,154 --> 00:11:08,897 ‫by doing plus one here, 206 00:11:08,897 --> 00:11:12,870 ‫or we could move back twice by doing minus two. 207 00:11:12,870 --> 00:11:16,656 ‫But usually, what we always need is just like this. 208 00:11:16,656 --> 00:11:19,800 ‫Now okay, and that's actually it. 209 00:11:19,800 --> 00:11:22,550 ‫That is programmatic navigation for you. 210 00:11:22,550 --> 00:11:25,446 ‫Now here, I'm just noticing we have some problem. 211 00:11:25,446 --> 00:11:27,488 ‫So something with the country list. 212 00:11:27,488 --> 00:11:31,219 ‫So country list, 213 00:11:31,219 --> 00:11:34,293 ‫I remember that we removed the key from here, 214 00:11:34,293 --> 00:11:36,193 ‫but we never put it back. 215 00:11:36,193 --> 00:11:41,193 ‫So let's just use the country.country 216 00:11:41,850 --> 00:11:44,760 ‫which is unique in this situation. 217 00:11:44,760 --> 00:11:47,523 ‫So let's reload and then we get no more error.