1 00:00:02,200 --> 00:00:05,670 To really utilize this dynamic path feature, 2 00:00:05,670 --> 00:00:08,160 we need access to the concrete value 3 00:00:08,160 --> 00:00:12,590 entered in the URL inside of the loaded component. 4 00:00:12,590 --> 00:00:14,660 So here in the product detail component, 5 00:00:14,660 --> 00:00:17,420 I wanna find out what the product ID is 6 00:00:17,420 --> 00:00:19,539 for which this component whilst loaded 7 00:00:19,539 --> 00:00:21,870 so that then in this component, 8 00:00:21,870 --> 00:00:24,290 I could make a request to the back-end, 9 00:00:24,290 --> 00:00:29,080 to the API, to fetch the full data for that product. 10 00:00:29,080 --> 00:00:31,830 And getting that concrete value is again, 11 00:00:31,830 --> 00:00:34,160 thankfully, straightforward. 12 00:00:34,160 --> 00:00:38,200 Again we can import from React Router DOM 13 00:00:38,200 --> 00:00:41,882 and from there, we import a special hook, 14 00:00:41,882 --> 00:00:44,797 a custom hook not created by us 15 00:00:44,797 --> 00:00:47,690 but by the React Router team. 16 00:00:47,690 --> 00:00:50,093 We can use the UseParams hook. 17 00:00:51,820 --> 00:00:54,940 And if we call UseParams, this hook will return 18 00:00:54,940 --> 00:00:58,920 a params object, which we can store in a constant. 19 00:00:58,920 --> 00:01:02,750 And this object will have key value pairs 20 00:01:02,750 --> 00:01:05,660 where the keys are the dynamic segments 21 00:01:05,660 --> 00:01:07,160 leading to that page. 22 00:01:07,160 --> 00:01:09,750 In this case, we have one dynamic segment 23 00:01:09,750 --> 00:01:14,080 but we could have multiple segments if we needed. 24 00:01:14,080 --> 00:01:16,300 Here, we don't need multiple segments though 25 00:01:16,300 --> 00:01:17,690 so one segment is fine 26 00:01:17,690 --> 00:01:19,860 and we'll then have this identifier, 27 00:01:19,860 --> 00:01:22,277 which we specified here after the colon 28 00:01:22,277 --> 00:01:26,920 as a key in this params object, which we get here. 29 00:01:26,920 --> 00:01:30,147 So here we could console log params.productID, 30 00:01:31,619 --> 00:01:35,933 productID because I used productID as a key here. 31 00:01:37,910 --> 00:01:40,160 And we can of course not just console log it, 32 00:01:40,160 --> 00:01:42,563 but we could also output it here. 33 00:01:43,670 --> 00:01:46,370 We could add a paragraph here 34 00:01:46,370 --> 00:01:49,450 and then the value which I wanna output here 35 00:01:49,450 --> 00:01:51,277 is params.ProductID. 36 00:01:54,080 --> 00:01:55,390 If we save this, 37 00:01:55,390 --> 00:01:58,080 now I see anything dash else here, 38 00:01:58,080 --> 00:02:02,260 because I am on product dash details slash anything else. 39 00:02:02,260 --> 00:02:04,660 If I enter P1 here, I see P1. 40 00:02:04,660 --> 00:02:07,720 If I enter P2 here, I see P2. 41 00:02:07,720 --> 00:02:10,010 And for the moment, we're not doing anything fancy 42 00:02:10,010 --> 00:02:13,560 with it, we're not using it to send an HTTP request 43 00:02:13,560 --> 00:02:14,720 or anything like that, 44 00:02:14,720 --> 00:02:17,010 but we will do that a little bit later 45 00:02:17,010 --> 00:02:20,810 once we build a more realistic project with React Router, 46 00:02:20,810 --> 00:02:23,323 right after we finish these basics here.