1 00:00:02,070 --> 00:00:03,790 Now React Router can help us 2 00:00:03,790 --> 00:00:05,920 with nested routes, as we learned. 3 00:00:05,920 --> 00:00:09,780 It also helps us with constructing path like this 4 00:00:09,780 --> 00:00:14,180 and with navigating to more complex URLs. 5 00:00:14,180 --> 00:00:17,530 Currently, we're always manually building strings like this, 6 00:00:17,530 --> 00:00:19,120 and that works. 7 00:00:19,120 --> 00:00:22,040 But this approach has one downside. 8 00:00:22,040 --> 00:00:26,970 If we ever decide that we don't wanna show our quotes 9 00:00:26,970 --> 00:00:30,403 under slash quotes, but maybe just slash quote, 10 00:00:31,250 --> 00:00:36,200 then we have to change this here in the route definition, 11 00:00:36,200 --> 00:00:38,590 and we have to change all our links 12 00:00:38,590 --> 00:00:41,030 and that is something we will have to do. 13 00:00:41,030 --> 00:00:43,640 But when we work with nested routes like here, 14 00:00:43,640 --> 00:00:47,370 we also have to change it here in these route definitions. 15 00:00:47,370 --> 00:00:50,090 So we have to change it in a lot of places 16 00:00:50,090 --> 00:00:51,357 and I will revert to it here, 17 00:00:51,357 --> 00:00:54,660 but we would have to change it in a lot of places. 18 00:00:54,660 --> 00:00:58,530 And at least for those nested routes, that's unnecessary. 19 00:00:58,530 --> 00:01:01,800 Here, we could simply use the fact that React Router 20 00:01:01,800 --> 00:01:05,040 gives us certain Hooks that allow us to find out 21 00:01:05,040 --> 00:01:08,660 for which URL this Component was rendered, 22 00:01:08,660 --> 00:01:11,350 so that we don't need to repeat that URL 23 00:01:11,350 --> 00:01:14,320 that path in the URL here. 24 00:01:14,320 --> 00:01:16,350 And for that we can use another hook 25 00:01:16,350 --> 00:01:21,350 provided by react-router-dom, useRouteMatch is to hook name. 26 00:01:22,290 --> 00:01:24,710 It's kind of similar to use location 27 00:01:24,710 --> 00:01:26,470 but it has more information 28 00:01:26,470 --> 00:01:28,360 about the currently loaded route. 29 00:01:28,360 --> 00:01:32,530 Not just about the URL but about some internally 30 00:01:32,530 --> 00:01:36,970 managed data React Router is aware of. 31 00:01:36,970 --> 00:01:39,320 We can simply call useRouteMatch here 32 00:01:39,320 --> 00:01:41,630 and we get such a match object. 33 00:01:41,630 --> 00:01:44,040 And let's simply have a look at this object first 34 00:01:44,040 --> 00:01:45,793 by logging it to the console. 35 00:01:47,220 --> 00:01:50,100 If we save that, if I open the dev tools, 36 00:01:50,100 --> 00:01:52,080 we get this kind of object. 37 00:01:52,080 --> 00:01:54,620 And what we see in here is that we get the path 38 00:01:54,620 --> 00:01:57,410 but not the actual path in a URL, 39 00:01:57,410 --> 00:02:01,660 but the path as it was defined by us for React Router, 40 00:02:01,660 --> 00:02:06,280 including our placeholder, and this can sometimes be useful. 41 00:02:06,280 --> 00:02:10,340 We also get the parents which were found for this route 42 00:02:10,340 --> 00:02:13,493 and we get the full actual URL. 43 00:02:14,330 --> 00:02:16,020 And that's no useful 44 00:02:16,020 --> 00:02:19,150 because now we can use this match object 45 00:02:19,150 --> 00:02:23,070 to construct these nested route paths dynamically. 46 00:02:23,070 --> 00:02:26,840 Here, for this comments nested route, 47 00:02:26,840 --> 00:02:31,390 ae can still create a string with a template literal, 48 00:02:31,390 --> 00:02:33,890 but we can inject a dynamic value here 49 00:02:33,890 --> 00:02:36,633 and use match dot path here. 50 00:02:37,610 --> 00:02:40,730 So this path, including the placeholder. 51 00:02:40,730 --> 00:02:43,000 We didn't do that before actually, 52 00:02:43,000 --> 00:02:45,790 we use the concrete value and that also works, 53 00:02:45,790 --> 00:02:48,760 but we can also defined as route with a placeholder 54 00:02:48,760 --> 00:02:51,470 because after all this year is a route definition, 55 00:02:51,470 --> 00:02:55,900 not a link, so having a placeholder here is okay. 56 00:02:55,900 --> 00:02:59,140 We also have a place holder here in the main quote 57 00:02:59,140 --> 00:03:01,483 detail route definition and that JS. 58 00:03:02,530 --> 00:03:04,930 So here we can then utilize this path. 59 00:03:04,930 --> 00:03:08,300 The same could be done here for this nested route 60 00:03:08,300 --> 00:03:10,660 which shows this load comments button. 61 00:03:10,660 --> 00:03:15,040 Here we can just use match path if we want to. 62 00:03:15,040 --> 00:03:19,860 With this, if I save and reload, we see the common section 63 00:03:19,860 --> 00:03:22,920 for slash comments and load comments otherwise. 64 00:03:22,920 --> 00:03:25,210 So we got the same behavior as before, 65 00:03:25,210 --> 00:03:28,070 but we don't manually have to create that string, 66 00:03:28,070 --> 00:03:32,250 instead we extracted from the existing route definition. 67 00:03:32,250 --> 00:03:35,690 Which means that if we now change our route routes 68 00:03:35,690 --> 00:03:38,620 from slash quotes to slash quote, 69 00:03:38,620 --> 00:03:41,600 we don't have to adjust our nested routes. 70 00:03:41,600 --> 00:03:45,120 And that is a clear win, it's less work. 71 00:03:45,120 --> 00:03:48,220 Now we can also use useRouteMatch 72 00:03:48,220 --> 00:03:51,110 and to this match object for this link here, 73 00:03:51,110 --> 00:03:54,817 because here I'm also constructing my full URL. 74 00:03:56,420 --> 00:03:58,430 And since I know that this should be a link 75 00:03:58,430 --> 00:04:01,360 to a nested route, I don't need to do that. 76 00:04:01,360 --> 00:04:06,360 Instead, we can inject match dot URL here 77 00:04:06,690 --> 00:04:10,240 and then just append slash comments there after. 78 00:04:10,240 --> 00:04:13,680 With that, again, we have less work here and we use the fact 79 00:04:13,680 --> 00:04:16,880 that we already are on a part of this page 80 00:04:16,880 --> 00:04:17,993 we wanna link to. 81 00:04:19,280 --> 00:04:23,430 So with that, if I, again, go to a single quote 82 00:04:23,430 --> 00:04:26,600 if I click Load Comments, I do load to comment successfully. 83 00:04:26,600 --> 00:04:30,080 But now we're using some convenience features 84 00:04:30,080 --> 00:04:31,720 offered by React Router, 85 00:04:31,720 --> 00:04:34,590 which ensured that we reuse existing knowledge 86 00:04:34,590 --> 00:04:38,010 and we don't have to hard to code as much. 87 00:04:38,010 --> 00:04:40,660 Speaking of hard coding, the quote list Component 88 00:04:40,660 --> 00:04:43,100 also has some hard coding here. 89 00:04:43,100 --> 00:04:46,920 We push slash quotes and change the query parameter. 90 00:04:46,920 --> 00:04:48,470 This is all is a bit redundant 91 00:04:48,470 --> 00:04:52,080 because we already are on slash quotes 92 00:04:52,080 --> 00:04:54,740 and we will always stay on slash quotes, 93 00:04:54,740 --> 00:04:57,520 it's just about the query presence here. 94 00:04:57,520 --> 00:05:02,520 So here we could also use route match if we want to, 95 00:05:02,760 --> 00:05:05,550 or use the existing location object, 96 00:05:05,550 --> 00:05:09,430 since here, I'm only interested in the currently loaded path 97 00:05:09,430 --> 00:05:13,980 and then not hard code slash quotes here 98 00:05:13,980 --> 00:05:17,340 but instead use the current location path 99 00:05:17,340 --> 00:05:21,373 which is the part after the domain, which is slash quotes. 100 00:05:23,130 --> 00:05:26,790 So for this, we could change this code here a little bit 101 00:05:26,790 --> 00:05:31,073 and actually switched to a template literal, 102 00:05:32,650 --> 00:05:37,650 where I inject the result of this expression here 103 00:05:39,310 --> 00:05:42,520 and where I start with another injected value, 104 00:05:42,520 --> 00:05:45,460 where we have a look at location path. 105 00:05:45,460 --> 00:05:47,080 And then we add a slash, 106 00:05:47,080 --> 00:05:49,263 and that's the only hard coded text here. 107 00:05:50,430 --> 00:05:54,250 And then we add a question mark, sort equals, 108 00:05:54,250 --> 00:05:56,533 and then the value of this expression. 109 00:05:57,580 --> 00:06:00,630 And here that's actually path name, not path. 110 00:06:00,630 --> 00:06:03,760 Location has a path name, property which holds 111 00:06:03,760 --> 00:06:07,710 the full current path, with all the concrete values 112 00:06:07,710 --> 00:06:08,713 entered there. 113 00:06:09,690 --> 00:06:11,810 So now with that, if we are on slash quotes, 114 00:06:11,810 --> 00:06:12,840 if we click this button, 115 00:06:12,840 --> 00:06:15,300 we again do change the query parameter, 116 00:06:15,300 --> 00:06:19,070 but we reduced the amount of hard coded values. 117 00:06:19,070 --> 00:06:24,070 We can also change the location we push or we link to. 118 00:06:24,840 --> 00:06:29,190 Up to this point, we always worked with strings. 119 00:06:29,190 --> 00:06:33,800 Whenever we created a link, like here in quote detail, 120 00:06:33,800 --> 00:06:36,660 we in the end constructed a string. 121 00:06:36,660 --> 00:06:40,610 The same in our main navigation, we have strings here 122 00:06:40,610 --> 00:06:44,370 as destinations, and that is very common. 123 00:06:44,370 --> 00:06:47,380 But if you have more complex destinations, 124 00:06:47,380 --> 00:06:51,570 like here in quote list, where query parameters are involved 125 00:06:51,570 --> 00:06:54,110 you might be constructing very long strings 126 00:06:54,110 --> 00:06:56,650 and code could look like this. 127 00:06:56,650 --> 00:07:00,570 It's readable, but it could be more readable. 128 00:07:00,570 --> 00:07:04,450 And that's why React Router actually allows you 129 00:07:04,450 --> 00:07:08,270 to use an alternative description off the destination 130 00:07:08,270 --> 00:07:12,130 a link should lead to or this programmatic navigation 131 00:07:12,130 --> 00:07:13,203 should lead to. 132 00:07:14,680 --> 00:07:16,500 And I'll show it here at the example 133 00:07:16,500 --> 00:07:19,260 of programmatic navigation, but you could use the same 134 00:07:19,260 --> 00:07:22,350 kind of value for all your links. 135 00:07:22,350 --> 00:07:25,450 Besides using a string here, as we did this far, 136 00:07:25,450 --> 00:07:27,420 you can also pass an object 137 00:07:27,420 --> 00:07:29,923 which describes the target's destination. 138 00:07:30,870 --> 00:07:34,390 This object wants a path name, which is the path 139 00:07:34,390 --> 00:07:38,760 you wanna navigate to, something like slash quotes. 140 00:07:38,760 --> 00:07:42,320 Or in this case, simply location dot path name, 141 00:07:42,320 --> 00:07:44,513 since we wanna stay on the current page. 142 00:07:45,400 --> 00:07:49,970 And then here, you can also add a search key 143 00:07:50,940 --> 00:07:54,393 and that allows you to add query parameters. 144 00:07:55,500 --> 00:07:58,580 The search key simply wants a string 145 00:07:58,580 --> 00:08:01,410 where we still construct our query parameters 146 00:08:01,410 --> 00:08:03,930 as we do it here, so I'll copy that code 147 00:08:03,930 --> 00:08:06,890 and add it in this template literal here. 148 00:08:06,890 --> 00:08:10,280 But now, we split our path and our search, 149 00:08:10,280 --> 00:08:13,780 our query parameter part into two different properties. 150 00:08:13,780 --> 00:08:17,700 And this here is a bit more readable, I would argue. 151 00:08:17,700 --> 00:08:20,330 It's totally optional, you don't have to switch 152 00:08:20,330 --> 00:08:23,130 to this approach, but you may switch to it, 153 00:08:23,130 --> 00:08:28,130 if you have more complex URLs you wanna navigate to. 154 00:08:29,030 --> 00:08:32,670 And with that, if I saved this, if I reload slash quotes, 155 00:08:32,670 --> 00:08:34,640 this button still works. 156 00:08:34,640 --> 00:08:36,760 But now we made this a bit more readable 157 00:08:36,760 --> 00:08:39,330 and that's a never convenience feature 158 00:08:39,330 --> 00:08:41,063 offered by React Router.