1 00:00:02,120 --> 00:00:04,100 Now in this core section, 2 00:00:04,100 --> 00:00:06,250 I'll continue working on this 3 00:00:06,250 --> 00:00:08,320 Share a Restaurant site here, 4 00:00:08,320 --> 00:00:10,820 which we worked on in the previous section. 5 00:00:10,820 --> 00:00:15,220 And attached you'll find a snapshot of this project 6 00:00:15,220 --> 00:00:18,380 so that we can all start on the same page. 7 00:00:18,380 --> 00:00:21,560 And I wanna start by adding a new feature, 8 00:00:21,560 --> 00:00:24,133 a new page to this project. 9 00:00:25,170 --> 00:00:29,560 At the moment, we can view a list of all restaurants here, 10 00:00:29,560 --> 00:00:32,850 and we can then view the website of a restaurant, 11 00:00:32,850 --> 00:00:36,280 but I actually want to tweak this a little bit. 12 00:00:36,280 --> 00:00:38,980 And for that, I wanna replace this button here, 13 00:00:38,980 --> 00:00:42,060 this view website button with a button that takes us 14 00:00:42,060 --> 00:00:45,230 to a detail page of this restaurant. 15 00:00:45,230 --> 00:00:46,950 And then on that detail page 16 00:00:46,950 --> 00:00:49,600 we can go to the website, but most importantly, 17 00:00:49,600 --> 00:00:52,330 we'll then have one page per restaurant, 18 00:00:52,330 --> 00:00:55,420 which we could also share with other people 19 00:00:55,420 --> 00:00:56,380 because at the moment, 20 00:00:56,380 --> 00:00:59,690 it's quite hard to share one specific restaurant 21 00:00:59,690 --> 00:01:00,710 with a friend, 22 00:01:00,710 --> 00:01:03,610 because you can only share this list of restaurants. 23 00:01:03,610 --> 00:01:05,277 And then you have to tell your friend, 24 00:01:05,277 --> 00:01:08,330 "Hey, I'm talking about the second one." 25 00:01:08,330 --> 00:01:11,010 So having a detailed page that you could share 26 00:01:11,010 --> 00:01:12,730 would be way more useful 27 00:01:12,730 --> 00:01:15,900 and that's what we wanna implement now. 28 00:01:15,900 --> 00:01:18,550 And therefore we'll have to add such a detail page, 29 00:01:18,550 --> 00:01:20,420 we'll have to change this button 30 00:01:20,420 --> 00:01:22,760 and we'll have to add some Express code 31 00:01:22,760 --> 00:01:25,570 to serve that detail page. 32 00:01:25,570 --> 00:01:27,280 Now to achieve this goal, 33 00:01:27,280 --> 00:01:29,140 I'll start by going to my views 34 00:01:29,140 --> 00:01:31,640 and then to this restaurant item. 35 00:01:31,640 --> 00:01:32,750 And here we, by the way, 36 00:01:32,750 --> 00:01:34,860 see advantage of extracting this 37 00:01:34,860 --> 00:01:38,470 into a separate partial that we can include. 38 00:01:38,470 --> 00:01:42,030 It's super easy to now add it, such a restaurant item 39 00:01:42,030 --> 00:01:46,460 without having to dig for the entire restaurants EJS file. 40 00:01:46,460 --> 00:01:48,100 We just go to this item file 41 00:01:48,100 --> 00:01:51,290 and we have all the code for such an item here. 42 00:01:51,290 --> 00:01:55,350 And here I wanna change this link here, this button, 43 00:01:55,350 --> 00:01:57,160 instead of linking to the website, 44 00:01:57,160 --> 00:02:00,410 I wanna link to the restaurant itself 45 00:02:00,410 --> 00:02:02,150 so to the detail page, 46 00:02:02,150 --> 00:02:04,310 so save View Restaurant here, 47 00:02:04,310 --> 00:02:08,110 and then on that detail page I wanna link to the website. 48 00:02:08,110 --> 00:02:10,130 Now changing this button text is of course 49 00:02:10,130 --> 00:02:12,040 only the first step. 50 00:02:12,040 --> 00:02:15,013 The more important next step is 51 00:02:15,013 --> 00:02:17,490 that we need such a detailed page 52 00:02:17,490 --> 00:02:21,010 and we need a way of serving that detailed page. 53 00:02:21,010 --> 00:02:23,713 So we need to add our service side code. 54 00:02:24,740 --> 00:02:27,523 Now let's start by adding the detail page maybe, 55 00:02:28,670 --> 00:02:33,670 for this I'll copy that restaurants.ejs file here 56 00:02:33,810 --> 00:02:34,940 like this, 57 00:02:34,940 --> 00:02:37,440 and I'll rename it to 58 00:02:37,440 --> 00:02:40,810 restaurant-detail.ejs, 59 00:02:40,810 --> 00:02:41,890 the name is up to you, 60 00:02:41,890 --> 00:02:44,700 but this will be the page with the details 61 00:02:44,700 --> 00:02:45,970 about a single restaurant 62 00:02:45,970 --> 00:02:47,893 so I think the name makes sense. 63 00:02:49,050 --> 00:02:51,710 I wanna have the general skeleton in there. 64 00:02:51,710 --> 00:02:55,870 I wanna include my header and side drawer, 65 00:02:55,870 --> 00:02:59,340 but in the main section I now wanna change the content. 66 00:02:59,340 --> 00:03:02,150 I don't want to have a list of restaurants here 67 00:03:02,150 --> 00:03:04,600 instead here in the h1 tech 68 00:03:04,600 --> 00:03:08,500 I'd like to have to title of the restaurant. 69 00:03:08,500 --> 00:03:12,060 And then below that I'd like to have my restaurant data. 70 00:03:12,060 --> 00:03:15,370 So a paragraph with the Cuisine, let's say, 71 00:03:15,370 --> 00:03:18,500 and the then maybe such a pipe symbol here 72 00:03:18,500 --> 00:03:22,110 where I then have the Address there after, 73 00:03:22,110 --> 00:03:27,090 and then a paragraph with the Description of the restaurant, 74 00:03:27,090 --> 00:03:30,260 and then below that maybe a paragraph 75 00:03:30,260 --> 00:03:33,480 with that link to the website, 76 00:03:33,480 --> 00:03:35,730 View Website. 77 00:03:35,730 --> 00:03:39,283 That is the general structure I wanna have here. 78 00:03:40,420 --> 00:03:43,900 Now we can work on the styling and the concrete code 79 00:03:43,900 --> 00:03:46,810 for outputting concrete data here later, 80 00:03:46,810 --> 00:03:49,743 but that will roughly be my detail page. 81 00:03:50,810 --> 00:03:54,060 Now we need a way of serving that detail page. 82 00:03:54,060 --> 00:03:57,590 And that actually requires the use of a brand new concept, 83 00:03:57,590 --> 00:03:59,420 which we haven't seen before. 84 00:03:59,420 --> 00:04:02,550 We need dynamic routes. 85 00:04:02,550 --> 00:04:05,643 Now, what are dynamic routes and why do we need them? 86 00:04:06,650 --> 00:04:10,440 Well, we have a varying amount of restaurants here 87 00:04:10,440 --> 00:04:13,860 and new restaurants can be added all the time. 88 00:04:13,860 --> 00:04:18,700 So our restaurants are dynamic user generated data 89 00:04:18,700 --> 00:04:22,220 and therefore as a developer, we don't know in advance, 90 00:04:22,220 --> 00:04:24,540 how many restaurants we'll have. 91 00:04:24,540 --> 00:04:28,340 Therefore every restaurant should have a unique identifier, 92 00:04:28,340 --> 00:04:30,370 some unique id, 93 00:04:30,370 --> 00:04:31,940 and then it would be great 94 00:04:31,940 --> 00:04:34,320 if we could use one of the same page, 95 00:04:34,320 --> 00:04:36,940 this template which we prepared here 96 00:04:36,940 --> 00:04:40,300 with different data for different restaurants, 97 00:04:40,300 --> 00:04:43,210 it's the same page, but the data differs 98 00:04:43,210 --> 00:04:45,860 and we don't wanna create tens, 99 00:04:45,860 --> 00:04:48,610 or dozens, or hundreds of routes here. 100 00:04:48,610 --> 00:04:50,830 But instead we want to define one route 101 00:04:50,830 --> 00:04:53,150 in our Express code here 102 00:04:53,150 --> 00:04:58,150 which has some dynamic segment in the path, you could say, 103 00:04:58,820 --> 00:05:00,500 because as I said as a developer 104 00:05:00,500 --> 00:05:01,890 we don't know in advance 105 00:05:01,890 --> 00:05:03,740 how many restaurants we'll have 106 00:05:03,740 --> 00:05:05,980 so what we can't do is create 107 00:05:05,980 --> 00:05:10,170 a bunch of paths like restaurant one, 108 00:05:10,170 --> 00:05:13,230 and then another one for restaurant two, 109 00:05:13,230 --> 00:05:15,000 that won't work. 110 00:05:15,000 --> 00:05:18,150 We can't predict the number of restaurants in advance, 111 00:05:18,150 --> 00:05:22,380 and we don't know de unique ids of all those restaurants 112 00:05:22,380 --> 00:05:23,700 in advance. 113 00:05:23,700 --> 00:05:26,320 So we'll need a way of defining a route 114 00:05:26,320 --> 00:05:28,430 here in our Express code 115 00:05:28,430 --> 00:05:32,790 that has a dynamic placeholder in the path 116 00:05:32,790 --> 00:05:34,050 where we can then use 117 00:05:34,050 --> 00:05:37,050 the concrete data entered in the URL 118 00:05:37,050 --> 00:05:39,960 to load the correct restaurant. 119 00:05:39,960 --> 00:05:42,930 And if that's not 100% clear yet, 120 00:05:42,930 --> 00:05:45,563 I'll show it to you how that works and what I mean. 121 00:05:46,400 --> 00:05:47,620 And for that let's, first of all, 122 00:05:47,620 --> 00:05:51,950 maybe start with the kind of URL we'd like to visit. 123 00:05:51,950 --> 00:05:55,190 Where should this button, this view restaurant button, 124 00:05:55,190 --> 00:05:57,393 which it is soon lead to. 125 00:05:58,530 --> 00:06:00,110 It should lead to something 126 00:06:00,110 --> 00:06:04,120 like our domain/restaurants 127 00:06:04,120 --> 00:06:06,763 and then the id of the restaurant 128 00:06:06,763 --> 00:06:08,930 like r1, r2, r3 and so on. 129 00:06:13,009 --> 00:06:15,700 And therefore I wanna define such a path, 130 00:06:15,700 --> 00:06:17,823 such a route here at my backend, 131 00:06:18,840 --> 00:06:20,880 the exact position doesn't matter, 132 00:06:20,880 --> 00:06:23,450 but I'll do it all after the restaurants route 133 00:06:23,450 --> 00:06:26,350 since this route, which we are about to define, 134 00:06:26,350 --> 00:06:28,223 is kind of related to that. 135 00:06:29,320 --> 00:06:31,620 For that I'll add another get route 136 00:06:31,620 --> 00:06:33,870 because we wanna get a page, 137 00:06:33,870 --> 00:06:36,880 we don't wanna submit to any data, 138 00:06:36,880 --> 00:06:40,250 and now the path should be /restaurants, 139 00:06:40,250 --> 00:06:42,933 but not just that, 140 00:06:44,290 --> 00:06:46,500 instead it should be slash 141 00:06:46,500 --> 00:06:48,820 and then the id of the restaurant, 142 00:06:48,820 --> 00:06:51,650 but as mentioned we don't know the id in advance 143 00:06:51,650 --> 00:06:56,390 and there will be dozens or hundreds of ids eventually. 144 00:06:56,390 --> 00:06:58,700 That's why in Express you can define 145 00:06:58,700 --> 00:07:02,350 a dynamic route with a dynamic placeholder 146 00:07:02,350 --> 00:07:06,560 for some data that will be encoded in the URL 147 00:07:06,560 --> 00:07:10,180 by adding a colon here in your path. 148 00:07:10,180 --> 00:07:11,363 Let me zoom in a bit. 149 00:07:12,200 --> 00:07:15,310 So we have this colon here in our path, 150 00:07:15,310 --> 00:07:16,810 and then after this colon, 151 00:07:16,810 --> 00:07:19,590 you can define any identifier 152 00:07:19,590 --> 00:07:23,370 or placeholder name of your choice 153 00:07:23,370 --> 00:07:24,993 like restaurantid 154 00:07:26,550 --> 00:07:28,003 or just id, 155 00:07:29,210 --> 00:07:31,563 now this is up to you, the colon is not. 156 00:07:33,010 --> 00:07:35,560 Now, this defines a dynamic route 157 00:07:35,560 --> 00:07:37,930 and then just as in all the other routes, 158 00:07:37,930 --> 00:07:42,930 we have our Request Response Handler function here, 159 00:07:43,120 --> 00:07:47,510 which I pass as a second argument to this get method here 160 00:07:49,079 --> 00:07:51,590 and in there we can now do what we always do, 161 00:07:51,590 --> 00:07:53,710 but, and that's new, 162 00:07:53,710 --> 00:07:57,030 we will also get access to the concrete value 163 00:07:57,030 --> 00:07:58,460 that was entered for id 164 00:07:59,490 --> 00:08:02,260 so that if a user enters this page 165 00:08:02,260 --> 00:08:06,960 for domain/restaurants/r1 166 00:08:06,960 --> 00:08:10,750 we get access to this concrete r1 value 167 00:08:10,750 --> 00:08:13,680 here inside of this handler function. 168 00:08:13,680 --> 00:08:16,860 And we can then look for a restaurant with that id 169 00:08:16,860 --> 00:08:18,940 to load and to display the data 170 00:08:18,940 --> 00:08:21,710 for this specific restaurant. 171 00:08:21,710 --> 00:08:24,020 That's how such dynamic routes work 172 00:08:24,020 --> 00:08:28,170 and dynamic routes are a crucial feature of most websites 173 00:08:28,170 --> 00:08:31,800 since most websites don't just have lists of data, 174 00:08:31,800 --> 00:08:34,890 but instead also detail pages for data 175 00:08:34,890 --> 00:08:39,299 like the details about a product you selected on Amazon, 176 00:08:39,299 --> 00:08:44,054 where you get some unique identifier and coded into URL, 177 00:08:44,054 --> 00:08:47,140 and you then want to load the details for this product 178 00:08:47,140 --> 00:08:49,123 or in this case restaurant. 179 00:08:50,390 --> 00:08:52,550 So that is a key feature 180 00:08:52,550 --> 00:08:55,550 which we also need to build realistic websites 181 00:08:55,550 --> 00:08:57,303 and this is how we can use it. 182 00:08:58,500 --> 00:09:00,500 Now to get hold of the concrete value 183 00:09:00,500 --> 00:09:04,340 that was entered by the user when this page is visited, 184 00:09:04,340 --> 00:09:06,520 we can use this request object 185 00:09:06,520 --> 00:09:10,743 and there we have a params key which we can access. 186 00:09:12,060 --> 00:09:15,600 Params itself actually contains an object 187 00:09:15,600 --> 00:09:20,440 and that object will then have any dynamic placeholders 188 00:09:20,440 --> 00:09:25,440 that we defined in this path as properties, as keys. 189 00:09:25,620 --> 00:09:29,240 So we have the id key here on params 190 00:09:29,240 --> 00:09:32,383 because I chose id here in the URL. 191 00:09:33,240 --> 00:09:35,140 If I chose rid here for restaurant id, 192 00:09:37,633 --> 00:09:40,083 we have rid here as well. 193 00:09:41,490 --> 00:09:44,350 So I'm going with id and then from here, 194 00:09:44,350 --> 00:09:48,140 I get my restaurant id by extracting it 195 00:09:48,140 --> 00:09:50,053 from req.params.id. 196 00:09:51,080 --> 00:09:54,840 And now we can use this restaurant id that we got here 197 00:09:54,840 --> 00:09:57,480 to load a specific restaurant 198 00:09:57,480 --> 00:10:01,100 by its id from our restaurant data, 199 00:10:01,100 --> 00:10:04,490 from that restaurants.json file. 200 00:10:04,490 --> 00:10:06,260 And that's not a tiny problem 201 00:10:06,260 --> 00:10:08,470 because at the moment our restaurants here 202 00:10:08,470 --> 00:10:12,660 don't have any ids so we'll need to do that. 203 00:10:12,660 --> 00:10:14,210 Before we do that though, 204 00:10:14,210 --> 00:10:16,600 I wanna finish this dynamic route topic 205 00:10:16,600 --> 00:10:18,700 and show you that it actually works 206 00:10:18,700 --> 00:10:20,170 before we then as a next step, 207 00:10:20,170 --> 00:10:24,090 also make sure that we can work with the data correctly. 208 00:10:24,090 --> 00:10:26,180 And to show you that it works, 209 00:10:26,180 --> 00:10:29,920 I wanna work on this dynamic route that we added 210 00:10:29,920 --> 00:10:33,640 and then rendered this new view that we prepared 211 00:10:33,640 --> 00:10:37,350 the restaurant-detail view 212 00:10:37,350 --> 00:10:41,133 because we added the this restaurant detail EJS file. 213 00:10:42,240 --> 00:10:44,600 And to this view, 214 00:10:44,600 --> 00:10:48,560 I simply wanna pass my restaurant id 215 00:10:48,560 --> 00:10:50,770 and I'll give it a key of rid 216 00:10:50,770 --> 00:10:53,360 and then pass my extracted restaurant id 217 00:10:53,360 --> 00:10:56,750 as a value to this rid key here, 218 00:10:56,750 --> 00:10:59,150 which as you learned will be available 219 00:10:59,150 --> 00:11:02,450 as a variable inside of that template therefore 220 00:11:04,040 --> 00:11:07,000 because we're passing it with that second argument 221 00:11:07,000 --> 00:11:08,320 to the render method 222 00:11:08,320 --> 00:11:11,000 and the data we provide here is available 223 00:11:11,000 --> 00:11:12,163 in the template then. 224 00:11:13,070 --> 00:11:15,240 And therefore now in that template, 225 00:11:15,240 --> 00:11:17,050 I will simply... 226 00:11:18,272 --> 00:11:21,117 I'll put it here, let's say in the h1 tag, 227 00:11:22,540 --> 00:11:25,650 there I'll output is rid value, 228 00:11:25,650 --> 00:11:29,800 which should be that dynamic route parameter entered 229 00:11:29,800 --> 00:11:31,143 in the URL. 230 00:11:32,820 --> 00:11:36,620 And now in restaurant-item ejs 231 00:11:36,620 --> 00:11:38,810 where I changed this button text, 232 00:11:38,810 --> 00:11:43,130 I now also wanna change this link here 233 00:11:43,130 --> 00:11:47,430 and that should no longer lead to the restaurant website, 234 00:11:47,430 --> 00:11:51,280 but instead it should load a specific restaurant 235 00:11:52,230 --> 00:11:56,400 and therefore here the path should be /restaurants/ 236 00:11:56,400 --> 00:11:58,580 and then the id of that restaurant 237 00:11:58,580 --> 00:12:01,480 which at the moment is not data we have 238 00:12:01,480 --> 00:12:06,430 so for the moment I'll just hard-code r1 as a value here, 239 00:12:06,430 --> 00:12:08,353 but we'll change this later. 240 00:12:10,700 --> 00:12:12,080 With all of that though, 241 00:12:12,080 --> 00:12:14,770 we have some dummy codes to play around with. 242 00:12:14,770 --> 00:12:18,870 And hence, if we now start our server again, 243 00:12:18,870 --> 00:12:22,440 since I did stop it after the previous section, 244 00:12:22,440 --> 00:12:26,720 if I reload this restaurant's page, the button changed 245 00:12:26,720 --> 00:12:31,130 and if I click it, I am taken to that detail page. 246 00:12:31,130 --> 00:12:33,890 The styling is missing, we'll have to fix this soon, 247 00:12:33,890 --> 00:12:36,570 but I am taken to this detail page 248 00:12:36,570 --> 00:12:39,560 and very important here 249 00:12:39,560 --> 00:12:41,670 this id is being displayed 250 00:12:41,670 --> 00:12:44,113 that's this value in the URL. 251 00:12:45,100 --> 00:12:46,370 And if you changed that here, 252 00:12:46,370 --> 00:12:51,010 if you enter anything else as an id, Something, for example, 253 00:12:51,010 --> 00:12:53,093 then you see Something here. 254 00:12:54,260 --> 00:12:57,440 Because with the code we wrote an app.js, 255 00:12:57,440 --> 00:12:59,970 we accept this dynamic segment, 256 00:12:59,970 --> 00:13:03,200 and then we get the concrete value that is provided 257 00:13:03,200 --> 00:13:06,230 in the URL with that line of code. 258 00:13:06,230 --> 00:13:08,830 And we can then use it for whatever we want. 259 00:13:08,830 --> 00:13:11,660 At the moment the only thing we're using it for is 260 00:13:11,660 --> 00:13:13,733 to then output it in the template. 261 00:13:15,290 --> 00:13:17,820 Now, why are the styles missing? 262 00:13:17,820 --> 00:13:21,750 The reason for that is that the path 263 00:13:21,750 --> 00:13:24,090 to these style files have an issue 264 00:13:24,090 --> 00:13:29,043 that we haven't encountered before, but now we do face it. 265 00:13:29,930 --> 00:13:32,640 These are actually relative paths 266 00:13:32,640 --> 00:13:35,530 here in restaurant-detail.ejs 267 00:13:35,530 --> 00:13:39,500 but also in our head partial here, 268 00:13:39,500 --> 00:13:41,970 I have relative paths, 269 00:13:41,970 --> 00:13:44,860 as I explained in the previous core section, 270 00:13:44,860 --> 00:13:48,650 if a path, no matter if it's to a different page 271 00:13:48,650 --> 00:13:52,680 or to a resource like a CSS or JavaScript file, 272 00:13:52,680 --> 00:13:55,650 does not start with a slash, 273 00:13:55,650 --> 00:13:59,970 then it's a relative path, seen relative from the file 274 00:13:59,970 --> 00:14:02,310 or from the path on the server 275 00:14:02,310 --> 00:14:04,593 where this resource is requested. 276 00:14:06,490 --> 00:14:08,780 Up to this point this wasn't a problem 277 00:14:09,790 --> 00:14:13,120 because all these routes, which we had before, 278 00:14:13,120 --> 00:14:17,290 all were only one level deep as it's called, 279 00:14:17,290 --> 00:14:19,710 we had /nothings, /restaurants, 280 00:14:19,710 --> 00:14:21,983 /recommend, and so on. 281 00:14:23,320 --> 00:14:26,330 Now with that detail page for the restaurants 282 00:14:26,330 --> 00:14:29,343 we have /restaurants/id, 283 00:14:30,240 --> 00:14:33,930 now because of that, any resources requested 284 00:14:33,930 --> 00:14:37,160 from that detail page are actually searched 285 00:14:37,160 --> 00:14:40,620 inside of a /restaurants folder. 286 00:14:40,620 --> 00:14:43,610 And you can see that if you open the developer tools 287 00:14:43,610 --> 00:14:46,630 on this page where the request fails. 288 00:14:46,630 --> 00:14:49,900 There you'll see a couple of error messages in the console, 289 00:14:49,900 --> 00:14:52,150 and whilst they might sound cryptic, 290 00:14:52,150 --> 00:14:55,190 you can see that the problem actually is the path 291 00:14:55,190 --> 00:14:58,090 where it's looking for shared CSS. 292 00:14:58,090 --> 00:15:01,400 It's looking for shared CSS in a styles folder, 293 00:15:01,400 --> 00:15:03,630 in a restaurant's folder. 294 00:15:03,630 --> 00:15:06,870 And the reason for that is that that detail page, 295 00:15:06,870 --> 00:15:10,973 that path is appended after /restaurants. 296 00:15:11,980 --> 00:15:15,020 So we have a nested path here, as it's called, 297 00:15:15,020 --> 00:15:19,200 because we have /restaurants/ something else 298 00:15:19,200 --> 00:15:21,630 before we only had one level /something 299 00:15:22,750 --> 00:15:24,080 and then nothing else. 300 00:15:24,080 --> 00:15:26,330 Now here we have two levels, 301 00:15:26,330 --> 00:15:28,560 two slashes. 302 00:15:28,560 --> 00:15:31,930 And therefore it's looking for the styles folder 303 00:15:31,930 --> 00:15:35,540 in the restaurants folder which doesn't exist. 304 00:15:35,540 --> 00:15:37,690 Now, the solution is easy though, 305 00:15:37,690 --> 00:15:41,420 in head.ejs we should just switch to absolute paths 306 00:15:41,420 --> 00:15:45,250 and therefore target /styles/shared, 307 00:15:45,250 --> 00:15:48,560 and also /scripts/responsive 308 00:15:49,440 --> 00:15:53,470 and do the same in the restaurant-detail.ejs file 309 00:15:53,470 --> 00:15:57,633 and there target /styles/restaurants. 310 00:15:58,760 --> 00:16:01,270 With that it's not trying to add that 311 00:16:01,270 --> 00:16:05,900 as a relative path on the currently active path in the URL, 312 00:16:05,900 --> 00:16:09,360 but instead it will always appended directly after the 313 00:16:09,360 --> 00:16:10,623 domain itself. 314 00:16:11,790 --> 00:16:13,630 And therefore if you make those changes 315 00:16:13,630 --> 00:16:15,390 and we save everything, 316 00:16:15,390 --> 00:16:18,020 if we reload, the styling is back 317 00:16:18,020 --> 00:16:20,970 on that detail page as well. 318 00:16:20,970 --> 00:16:23,570 So that's working and now with that, 319 00:16:23,570 --> 00:16:27,050 we have our first dynamic route in place. 320 00:16:27,050 --> 00:16:29,800 I hope it's clear why this feature exists 321 00:16:29,800 --> 00:16:31,800 and which problem it solves 322 00:16:31,800 --> 00:16:34,130 because we can now visit different restaurants 323 00:16:34,130 --> 00:16:35,820 with different identifiers 324 00:16:35,820 --> 00:16:39,580 and still show the same page with different data 325 00:16:39,580 --> 00:16:42,870 and therefore, we can now actually work on our code 326 00:16:42,870 --> 00:16:45,990 and make sure that our restaurants do have ids, 327 00:16:45,990 --> 00:16:48,773 which we can use in this dynamic route.