1 00:00:01,170 --> 00:00:04,459 ‫So let's now use React, Router params 2 00:00:04,459 --> 00:00:08,310 ‫in order to pass some data between pages. 3 00:00:08,310 --> 00:00:11,643 ‫So just like we have learned in the previous lecture, 4 00:00:13,020 --> 00:00:15,450 ‫and to demonstrate what we're going to do 5 00:00:15,450 --> 00:00:17,940 ‫I'm back here in the demo app. 6 00:00:17,940 --> 00:00:20,820 ‫And so as I hover over one of these items 7 00:00:20,820 --> 00:00:24,690 ‫watch the URL down here in the corner. 8 00:00:24,690 --> 00:00:28,290 ‫So it's really small, but try to see it. 9 00:00:28,290 --> 00:00:31,061 ‫So see that there we have app slash cities, 10 00:00:31,061 --> 00:00:34,440 ‫and then slash the ID of the city. 11 00:00:34,440 --> 00:00:37,770 ‫And if we go to another one, then the ID changes. 12 00:00:37,770 --> 00:00:41,498 ‫And so if I now click on this link, it'll move there. 13 00:00:41,498 --> 00:00:45,417 ‫And so now that ID is right here in the URL, 14 00:00:45,417 --> 00:00:49,200 ‫and as you might have noticed then this component 15 00:00:49,200 --> 00:00:52,289 ‫down here used that URL to fetch the data 16 00:00:52,289 --> 00:00:55,710 ‫about this city from the fake API. 17 00:00:55,710 --> 00:00:57,150 ‫And so that's what I mean by 18 00:00:57,150 --> 00:01:00,480 ‫passing data from one page to the other. 19 00:01:00,480 --> 00:01:05,400 ‫So in this case, we passed the ID of 739 by clicking here 20 00:01:05,400 --> 00:01:10,050 ‫and then reading that ID in this component from the URL. 21 00:01:10,050 --> 00:01:13,110 ‫And so all without storing that data somewhere 22 00:01:13,110 --> 00:01:15,060 ‫inside the React application, 23 00:01:15,060 --> 00:01:20,060 ‫which we would have to do without React Router, right? 24 00:01:20,430 --> 00:01:22,932 ‫And so let's now implement the same thing 25 00:01:22,932 --> 00:01:25,473 ‫here in our application. 26 00:01:26,670 --> 00:01:29,521 ‫So to use params with React Router, 27 00:01:29,521 --> 00:01:32,790 ‫we basically do it in three steps. 28 00:01:32,790 --> 00:01:34,860 ‫So first we create a new route, 29 00:01:34,860 --> 00:01:36,660 ‫then we link to that route, 30 00:01:36,660 --> 00:01:40,950 ‫and then in that route we read the state from the URL. 31 00:01:40,950 --> 00:01:43,260 ‫So that's just a high level overview, 32 00:01:43,260 --> 00:01:46,710 ‫and so let's now do all of these steps one by one. 33 00:01:46,710 --> 00:01:50,043 ‫And so first we create a brand new route here. 34 00:01:50,970 --> 00:01:54,633 ‫So let's do it right after the city's route here. 35 00:01:57,600 --> 00:02:00,100 ‫So a new route with a path 36 00:02:02,760 --> 00:02:03,990 ‫of cities. 37 00:02:03,990 --> 00:02:06,030 ‫And now comes the special part. 38 00:02:06,030 --> 00:02:09,478 ‫So this one is cities and then slash colon, 39 00:02:09,478 --> 00:02:12,930 ‫and then whatever name we want to give the parameter. 40 00:02:12,930 --> 00:02:15,900 ‫So let's call it ID in this case. 41 00:02:15,900 --> 00:02:18,185 ‫And so the shape of this URL here 42 00:02:18,185 --> 00:02:22,230 ‫is then exactly the same as this one. 43 00:02:22,230 --> 00:02:26,253 ‫So cities slash whatever ID has been passed in. 44 00:02:28,860 --> 00:02:31,863 ‫And then from there on the rest is the same. 45 00:02:32,940 --> 00:02:36,660 ‫So here I want to now use the city component 46 00:02:36,660 --> 00:02:38,673 ‫which actually already exists. 47 00:02:41,280 --> 00:02:43,410 ‫So let's write that here, 48 00:02:43,410 --> 00:02:46,427 ‫and so here is that city component. 49 00:02:46,427 --> 00:02:49,140 ‫So it already has some stuff in there 50 00:02:49,140 --> 00:02:52,833 ‫like this temporary data and all this JSX. 51 00:02:53,820 --> 00:02:57,360 ‫Now here we just need to remove that button 52 00:02:57,360 --> 00:02:59,348 ‫and I will actually remove, 53 00:02:59,348 --> 00:03:04,080 ‫or comment out all of this return block. 54 00:03:04,080 --> 00:03:07,023 ‫And instead I just want to return for now, 55 00:03:08,760 --> 00:03:10,983 ‫an H1 saying city, 56 00:03:11,880 --> 00:03:14,490 ‫because we will load the actual city data, 57 00:03:14,490 --> 00:03:16,533 ‫later on in the next section. 58 00:03:18,210 --> 00:03:20,910 ‫Okay and I keep forgetting 59 00:03:20,910 --> 00:03:23,103 ‫to close these route components. 60 00:03:25,110 --> 00:03:27,360 ‫Okay, and now all we have to do, 61 00:03:27,360 --> 00:03:30,933 ‫is to import the city component. 62 00:03:32,550 --> 00:03:35,430 ‫So city like this. 63 00:03:35,430 --> 00:03:37,893 ‫And so with this, we fixed all the bugs. 64 00:03:42,390 --> 00:03:44,010 ‫So this was the first step, 65 00:03:44,010 --> 00:03:46,560 ‫which was to create a route 66 00:03:46,560 --> 00:03:50,370 ‫with this path linked to this city component. 67 00:03:50,370 --> 00:03:54,000 ‫And so then whenever the URL takes this shape here 68 00:03:54,000 --> 00:03:56,550 ‫so cities slash something 69 00:03:56,550 --> 00:03:59,910 ‫it will then render the city component. 70 00:03:59,910 --> 00:04:02,160 ‫Now next up is the second step, 71 00:04:02,160 --> 00:04:06,300 ‫we actually need to link to this URL here, 72 00:04:06,300 --> 00:04:08,250 ‫so to this route. 73 00:04:08,250 --> 00:04:10,740 ‫And remember that we want to do so 74 00:04:10,740 --> 00:04:14,610 ‫right here in each of these list items. 75 00:04:14,610 --> 00:04:19,496 ‫So let's come to city item right here. 76 00:04:19,496 --> 00:04:23,400 ‫And so now inside of each list item element 77 00:04:23,400 --> 00:04:26,550 ‫we will actually place a link. 78 00:04:26,550 --> 00:04:31,550 ‫So one of these special links that comes from React Router. 79 00:04:33,120 --> 00:04:35,220 ‫Let's just close this for now. 80 00:04:35,220 --> 00:04:38,460 ‫And so then all of this stuff will go in there. 81 00:04:38,460 --> 00:04:41,100 ‫And then we just need to change the class name 82 00:04:41,100 --> 00:04:44,523 ‫from the list item to the link. 83 00:04:46,650 --> 00:04:48,150 ‫So let's reload. 84 00:04:48,150 --> 00:04:51,240 ‫And then that looks just like before. 85 00:04:51,240 --> 00:04:55,680 ‫However, we are missing the two prop here, 86 00:04:55,680 --> 00:04:58,110 ‫which is where now we will basically 87 00:04:58,110 --> 00:05:00,750 ‫pass in the data that we want to pass 88 00:05:00,750 --> 00:05:03,960 ‫from this page to the next one. 89 00:05:03,960 --> 00:05:05,613 ‫So to the city one. 90 00:05:06,540 --> 00:05:10,260 ‫So here we need actually a string. 91 00:05:10,260 --> 00:05:12,480 ‫So let's create a template literal, 92 00:05:12,480 --> 00:05:14,190 ‫and then all we want here 93 00:05:14,190 --> 00:05:16,173 ‫is actually the city id. 94 00:05:17,160 --> 00:05:22,160 ‫So let's grab that here from the city object, 95 00:05:22,560 --> 00:05:25,080 ‫and then let's just place that there. 96 00:05:25,080 --> 00:05:29,340 ‫And so now if we save this, and if you see down here 97 00:05:29,340 --> 00:05:33,303 ‫then notice how we already see those new links there. 98 00:05:34,590 --> 00:05:36,150 ‫Now as we click here, 99 00:05:36,150 --> 00:05:37,680 ‫then it actually moves, 100 00:05:37,680 --> 00:05:40,470 ‫and here we get the URL. 101 00:05:40,470 --> 00:05:44,955 ‫So we get that ID inside the cities slash ID URL 102 00:05:44,955 --> 00:05:47,943 ‫exactly like we have defined here. 103 00:05:49,200 --> 00:05:52,410 ‫Alright? And it's really important that here we 104 00:05:52,410 --> 00:05:56,160 ‫only pass in the ID because in this format, 105 00:05:56,160 --> 00:05:59,730 ‫this will then simply add it to the current URL. 106 00:05:59,730 --> 00:06:03,303 ‫While if we started this with a slash then, 107 00:06:04,470 --> 00:06:06,210 ‫let's come back here, 108 00:06:06,210 --> 00:06:07,200 ‫then in that case, 109 00:06:07,200 --> 00:06:09,720 ‫if we clicked it would simply go to 110 00:06:09,720 --> 00:06:12,990 ‫the root URL slash the ID. 111 00:06:12,990 --> 00:06:14,670 ‫So that's not what we want. 112 00:06:14,670 --> 00:06:18,600 ‫We want to basically attach this ID here to the 113 00:06:18,600 --> 00:06:21,123 ‫end of the URL that we already have. 114 00:06:23,520 --> 00:06:25,743 ‫Alright, so let's try that again. 115 00:06:27,120 --> 00:06:29,280 ‫And yeah, there it is. 116 00:06:29,280 --> 00:06:31,710 ‫Now in case you actually don't 117 00:06:31,710 --> 00:06:34,470 ‫have the cities in the URL yet 118 00:06:34,470 --> 00:06:38,550 ‫so in case you just came here and now click here 119 00:06:38,550 --> 00:06:41,010 ‫then this whole thing is not going to work 120 00:06:41,010 --> 00:06:43,830 ‫because then we don't have the cities part. 121 00:06:43,830 --> 00:06:47,040 ‫So it's important that first you click on cities 122 00:06:47,040 --> 00:06:49,740 ‫so that the URL gets that cities, 123 00:06:49,740 --> 00:06:51,810 ‫and then you can click here. 124 00:06:51,810 --> 00:06:54,420 ‫So we will fix that later in the section, 125 00:06:54,420 --> 00:06:56,850 ‫but for now make sure that you first 126 00:06:56,850 --> 00:06:59,523 ‫really activate this cities page, 127 00:06:59,523 --> 00:07:02,850 ‫so the city's route, so to say. 128 00:07:02,850 --> 00:07:05,160 ‫And so then again once you click here, 129 00:07:05,160 --> 00:07:10,140 ‫this ID from this city will get passed into the URL. 130 00:07:10,140 --> 00:07:12,930 ‫And so then we move to this other component, 131 00:07:12,930 --> 00:07:15,060 ‫and now in the third step we can then 132 00:07:15,060 --> 00:07:19,080 ‫read the data from the URL into this component. 133 00:07:19,080 --> 00:07:22,503 ‫And with that, we will then finish this entire cycle. 134 00:07:23,850 --> 00:07:27,930 ‫So let's come into the city component. 135 00:07:27,930 --> 00:07:32,070 ‫And then in order to get that data from the URL, 136 00:07:32,070 --> 00:07:34,623 ‫we use the useParam hook. 137 00:07:36,960 --> 00:07:40,800 ‫So useParams which is once again, 138 00:07:40,800 --> 00:07:44,370 ‫provided to us by React Router, 139 00:07:44,370 --> 00:07:46,350 ‫so it needs to be included here. 140 00:07:46,350 --> 00:07:49,980 ‫And so this will then return something to us. 141 00:07:49,980 --> 00:07:52,623 ‫So let's just call that X for now. 142 00:07:53,760 --> 00:07:56,740 ‫And then I want to console.log that X 143 00:07:58,530 --> 00:08:02,730 ‫and immediately we saw down here what we got here. 144 00:08:02,730 --> 00:08:07,560 ‫So we got this object with the ID that is right here. 145 00:08:07,560 --> 00:08:11,430 ‫And if we went back, for example, to Faro, 146 00:08:11,430 --> 00:08:15,033 ‫then here we got this 4545 ID, 147 00:08:15,960 --> 00:08:19,770 ‫and the reason why this is called ID here is because 148 00:08:19,770 --> 00:08:22,383 ‫that's the parameter name that we gave it here. 149 00:08:23,820 --> 00:08:26,040 ‫So if we called this city 150 00:08:26,040 --> 00:08:29,790 ‫then down here it would be called city. 151 00:08:29,790 --> 00:08:33,750 ‫So this here really determines the name of the data, 152 00:08:33,750 --> 00:08:36,960 ‫so of this parameter that we're passing in. 153 00:08:36,960 --> 00:08:39,630 ‫And so then here in the component where 154 00:08:39,630 --> 00:08:42,360 ‫we consume this data from the URL 155 00:08:42,360 --> 00:08:44,763 ‫we usually immediately destructure that. 156 00:08:45,630 --> 00:08:46,773 ‫So just like this. 157 00:08:47,820 --> 00:08:50,850 ‫And so now the only thing that I want to do here 158 00:08:50,850 --> 00:08:55,200 ‫is to then write that ID into this H1. 159 00:08:55,200 --> 00:08:57,635 ‫So for now, this is all that we're going to do 160 00:08:57,635 --> 00:09:00,240 ‫but later then in the next section 161 00:09:00,240 --> 00:09:03,570 ‫we will use this ID to fetch all the data 162 00:09:03,570 --> 00:09:06,960 ‫about the city from our API. 163 00:09:06,960 --> 00:09:11,850 ‫Nice. So we just learned how to use this very important tool 164 00:09:11,850 --> 00:09:14,610 ‫of React Router that are params. 165 00:09:14,610 --> 00:09:16,950 ‫So let's quickly recap. 166 00:09:16,950 --> 00:09:20,160 ‫So we created a new route right here, 167 00:09:20,160 --> 00:09:23,430 ‫and of course it wouldn't have to be a nested route, 168 00:09:23,430 --> 00:09:25,893 ‫so we could have done this anywhere here. 169 00:09:27,000 --> 00:09:30,570 ‫And here, let me just remove this actually. 170 00:09:30,570 --> 00:09:35,570 ‫So of course we could also have done product slash id, 171 00:09:37,530 --> 00:09:39,630 ‫so it wouldn't have to be a nested route 172 00:09:39,630 --> 00:09:43,440 ‫but this is just where this is useful in this application. 173 00:09:43,440 --> 00:09:45,690 ‫But of course in future applications 174 00:09:45,690 --> 00:09:46,920 ‫that we're going to build, 175 00:09:46,920 --> 00:09:50,111 ‫we will use params in some different place. 176 00:09:50,111 --> 00:09:54,090 ‫But anyway, here we specify the name of the param, 177 00:09:54,090 --> 00:09:57,120 ‫and as always the element that should be rendered 178 00:09:57,120 --> 00:09:59,883 ‫when the URL matches this path. 179 00:10:01,020 --> 00:10:05,340 ‫Then we basically link to this route, 180 00:10:05,340 --> 00:10:08,970 ‫so we create a link that we can actually move 181 00:10:08,970 --> 00:10:12,417 ‫to this page here in our application. 182 00:10:12,417 --> 00:10:16,260 ‫And we did so by passing in this data right here. 183 00:10:16,260 --> 00:10:18,900 ‫So this ID of each city. 184 00:10:18,900 --> 00:10:20,490 ‫And then as a final step, 185 00:10:20,490 --> 00:10:25,383 ‫we read that data from the URL using this useParams hook.