1 00:00:02,040 --> 00:00:05,600 Now we are nearing the end of this module. 2 00:00:05,600 --> 00:00:09,360 You might remember that on this quote detail page 3 00:00:09,360 --> 00:00:13,130 we actually also had this comments feature. 4 00:00:13,130 --> 00:00:15,040 At the moment we don't really have comments 5 00:00:15,040 --> 00:00:17,250 but we do have does nested route 6 00:00:17,250 --> 00:00:19,890 but currently we can only reach this route 7 00:00:19,890 --> 00:00:23,483 by manually adding this comments path here at the end. 8 00:00:24,420 --> 00:00:26,950 Now we might want to give the user a link 9 00:00:26,950 --> 00:00:29,890 that loads to comments or something like this. 10 00:00:29,890 --> 00:00:33,090 And that is something which we can implement indeed. 11 00:00:33,090 --> 00:00:35,940 Something which we did do before already, 12 00:00:35,940 --> 00:00:38,080 adding a link isn't too difficult. 13 00:00:38,080 --> 00:00:40,780 And therefore, of course, feel free to try this on your own. 14 00:00:40,780 --> 00:00:43,410 On the quote detail page, add a link 15 00:00:43,410 --> 00:00:45,060 below the highlighted quote, 16 00:00:45,060 --> 00:00:46,680 which will load the comments 17 00:00:46,680 --> 00:00:49,560 and navigate us to this path here. 18 00:00:49,560 --> 00:00:52,370 Here's a short pause for you to do this on your own. 19 00:00:52,370 --> 00:00:53,970 Thereafter we'll do it together. 20 00:00:57,120 --> 00:00:59,447 So let's add this link now, 21 00:00:59,447 --> 00:01:01,730 for this we need to import, 22 00:01:01,730 --> 00:01:04,930 link from react-router-DOM 23 00:01:04,930 --> 00:01:08,200 and then here in highlighted quote, 24 00:01:08,200 --> 00:01:10,070 we can add a link. 25 00:01:10,070 --> 00:01:11,980 And actually I will wrap this in a div 26 00:01:11,980 --> 00:01:14,410 with a class name of centered 27 00:01:14,410 --> 00:01:18,263 using this globally defined centered class here. 28 00:01:20,530 --> 00:01:22,890 And I'll then move my link into that div 29 00:01:22,890 --> 00:01:25,190 but that's of course optional. 30 00:01:25,190 --> 00:01:28,350 Then this link could say load comments 31 00:01:28,350 --> 00:01:33,350 and hence leads to the current URL/comments. 32 00:01:34,070 --> 00:01:37,380 Now for this I need to construct the destination dynamically 33 00:01:37,380 --> 00:01:39,740 because the quote ideas dynamic 34 00:01:39,740 --> 00:01:42,500 it depends on which quote you loaded. 35 00:01:42,500 --> 00:01:45,500 So I actually we can copy this code from down there 36 00:01:45,500 --> 00:01:48,370 because that's the path we want to navigate to. 37 00:01:48,370 --> 00:01:51,350 We wanna load this route in the end. 38 00:01:51,350 --> 00:01:54,220 Now I will also give this link extra class name. 39 00:01:54,220 --> 00:01:55,770 It's not something we did before 40 00:01:55,770 --> 00:01:59,610 but we can add classes to the anchor tag 41 00:01:59,610 --> 00:02:03,700 which link renders by using the regular class named prop. 42 00:02:03,700 --> 00:02:06,520 And here I'm using a global class again 43 00:02:06,520 --> 00:02:10,370 which is defined in that index CSS file. 44 00:02:10,370 --> 00:02:12,670 With all of that if we saved this, 45 00:02:12,670 --> 00:02:15,263 we got this load comments link here. 46 00:02:16,130 --> 00:02:20,450 And hence now if I go to a quote without /comments 47 00:02:20,450 --> 00:02:23,370 if I click load comments, we see that. 48 00:02:23,370 --> 00:02:26,870 But maybe we also want to make that link disappear 49 00:02:26,870 --> 00:02:29,480 after we load it to comments. 50 00:02:29,480 --> 00:02:31,600 Now we could try to implement this 51 00:02:31,600 --> 00:02:34,640 by looking at the URL and check 52 00:02:34,640 --> 00:02:37,830 whether we are on the comments page or not 53 00:02:37,830 --> 00:02:40,070 but we don't have to do this ourselves. 54 00:02:40,070 --> 00:02:43,990 We can hand that work off to react router. 55 00:02:43,990 --> 00:02:47,860 We can also move this here into a route. 56 00:02:47,860 --> 00:02:50,350 And that might be strange at first, 57 00:02:50,350 --> 00:02:53,880 but it is actually just embracing the functionality, 58 00:02:53,880 --> 00:02:56,120 react router gives us. 59 00:02:56,120 --> 00:02:58,840 We can add a new nested route here 60 00:02:58,840 --> 00:03:01,620 and this nested route should be active 61 00:03:01,620 --> 00:03:05,453 if the path is this path, 62 00:03:07,200 --> 00:03:09,770 but without the comments. 63 00:03:09,770 --> 00:03:13,190 So if we're on the page without slash comments 64 00:03:13,190 --> 00:03:15,850 then this route should become active. 65 00:03:15,850 --> 00:03:17,000 And only then. 66 00:03:17,000 --> 00:03:19,160 So I will add the exact prop here 67 00:03:19,160 --> 00:03:21,740 so that we're not matching the beginning of a path 68 00:03:21,740 --> 00:03:23,820 but the full path. 69 00:03:23,820 --> 00:03:27,100 Then I want to render this div because we can render 70 00:03:27,100 --> 00:03:30,883 any JSX code we want for any route we define. 71 00:03:31,940 --> 00:03:34,173 Now with this change made, 72 00:03:35,210 --> 00:03:37,450 we don't see the load comments text 73 00:03:37,450 --> 00:03:39,740 if we are on slash comments. 74 00:03:39,740 --> 00:03:41,650 But if I am on just the detailed page 75 00:03:41,650 --> 00:03:44,770 I do see load comments, but as soon as I click it 76 00:03:44,770 --> 00:03:48,150 it disappears because we changed to the nested route. 77 00:03:48,150 --> 00:03:49,800 And I'm showing this to you 78 00:03:49,800 --> 00:03:51,800 because I want you to really play 79 00:03:51,800 --> 00:03:55,580 around with react router and use its features. 80 00:03:55,580 --> 00:03:56,870 You can build something 81 00:03:56,870 --> 00:04:00,260 like this with help of nested routes. 82 00:04:00,260 --> 00:04:01,610 And this is a way 83 00:04:01,610 --> 00:04:03,900 of using those nested routes feature 84 00:04:03,900 --> 00:04:08,630 to conditionally render different content based on the URL 85 00:04:08,630 --> 00:04:12,770 without you having to manage some complex state. 86 00:04:12,770 --> 00:04:15,023 React router does that for you.