1 00:00:00,210 --> 00:00:00,570 All right. 2 00:00:00,840 --> 00:00:06,270 And the way we set up nested pages in Reactor Outer six is falling. 3 00:00:06,630 --> 00:00:14,520 So we go with our parent route, which in our case is going to be for its lush, but I'll showcase that 4 00:00:14,520 --> 00:00:15,480 it is regardless. 5 00:00:15,870 --> 00:00:23,130 Whatever the URL is over here and then whatever routes are going to be placed inside, we will get both. 6 00:00:23,430 --> 00:00:28,410 We'll get that shared layout, which we don't have in this particular example yet. 7 00:00:28,710 --> 00:00:29,700 So set up later. 8 00:00:30,240 --> 00:00:35,130 And also very actually are relative to the parent. 9 00:00:35,670 --> 00:00:37,380 So in this sense, this is a home run. 10 00:00:38,230 --> 00:00:44,920 It's going to be Ford's stats, all jobs, our job and of course, the profile, and we'll set up our 11 00:00:44,920 --> 00:00:45,430 components. 12 00:00:45,790 --> 00:00:51,880 But if I were to type here different URL, then it's going to be forward slash, for example, dashboard 13 00:00:52,090 --> 00:00:53,500 than Ford slash that. 14 00:00:53,890 --> 00:00:55,780 And the same for all the jobs. 15 00:00:55,780 --> 00:00:59,830 So hopefully you get the gist and also eventually will set up the index. 16 00:01:00,070 --> 00:01:08,260 So start step by step where first I want to showcase how the URL is going to work and then the shared 17 00:01:08,260 --> 00:01:16,240 layout, where eventually we'll have those nav bars and sidebars and also eventually will add the index 18 00:01:16,330 --> 00:01:16,930 over here. 19 00:01:16,990 --> 00:01:19,180 And if indexed at the moment, doesn't make any sense. 20 00:01:19,450 --> 00:01:21,580 Don't worry, we'll get there in a second. 21 00:01:21,940 --> 00:01:23,560 So our first step is falling. 22 00:01:23,980 --> 00:01:30,700 We're closed all the times just because I'm annoying that way and I'm going to look for my app. 23 00:01:30,700 --> 00:01:35,860 Jess and I have my route, so that still stays the same. 24 00:01:36,040 --> 00:01:37,330 We're not touching the roads. 25 00:01:37,810 --> 00:01:38,980 Here's what I want to do, though. 26 00:01:39,930 --> 00:01:45,570 I want to remove this element, and I want to actually remove the closing one. 27 00:01:46,060 --> 00:01:47,700 Now I want to set up my route. 28 00:01:48,210 --> 00:01:51,390 So that's going to be my home run and then inside of it. 29 00:01:51,660 --> 00:01:54,090 Let's place the rest of them all. 30 00:01:54,090 --> 00:01:56,500 Jobs profile, not sure. 31 00:01:56,500 --> 00:01:58,650 Allowed stats and add. 32 00:01:59,400 --> 00:02:01,650 And now I just need to come up with the URL. 33 00:02:02,220 --> 00:02:05,490 So in my case, I'm going to go with all jobs van. 34 00:02:05,490 --> 00:02:11,280 I'm going to set up ad job and stats and profile and stats eventually will be an index dropped, but 35 00:02:11,280 --> 00:02:11,850 not for now. 36 00:02:12,150 --> 00:02:15,140 So let's go here with around and then I'll go with path. 37 00:02:15,210 --> 00:02:16,530 So that's my URL. 38 00:02:16,830 --> 00:02:20,790 And then let's say stats, then what element do I want to render? 39 00:02:21,180 --> 00:02:23,220 Well, I have the stats one, correct? 40 00:02:23,580 --> 00:02:28,830 So let's go here with stats, then let's close this route and then let's copy and paste. 41 00:02:29,010 --> 00:02:34,410 Now we just want to change the URLs, and we also want to change the components. 42 00:02:34,560 --> 00:02:34,980 So my. 43 00:02:36,550 --> 00:02:44,590 I'm going to go with all the jobs and we want to set up our job and job and then lastly, we have over 44 00:02:44,590 --> 00:02:47,190 here a profile profile. 45 00:02:47,740 --> 00:02:50,440 Now we want a change here component. 46 00:02:51,070 --> 00:02:58,530 So let's say here all jobs than where you want to at the AGM, add job. 47 00:02:58,540 --> 00:03:06,130 And then lastly, we have over here a profile, and once we have all of this in place, let's save it 48 00:03:06,700 --> 00:03:12,040 and let's navigate to the big screen because first, I want to showcase how the URLs are going to work. 49 00:03:12,370 --> 00:03:15,010 And as I Senate, there's a tiny bug over here. 50 00:03:15,250 --> 00:03:17,650 Actually, we don't need to set them up these boards. 51 00:03:17,980 --> 00:03:18,670 My apologies. 52 00:03:19,240 --> 00:03:22,300 This one actually will be relative by default. 53 00:03:22,450 --> 00:03:27,610 So we save over here and then let's navigate to our local host 3000. 54 00:03:28,000 --> 00:03:29,740 Now, at the moment, nothing riskier. 55 00:03:30,130 --> 00:03:30,760 That's fine. 56 00:03:31,060 --> 00:03:34,180 Let's take a look at the forward slash and stats. 57 00:03:34,930 --> 00:03:36,640 What do you think you're going to see or hear? 58 00:03:37,630 --> 00:03:38,920 Perhaps that's correct. 59 00:03:39,280 --> 00:03:44,500 So if I'm going to go to all jobs, what I'm going to get here, all jobs. 60 00:03:44,830 --> 00:03:45,910 So this works. 61 00:03:46,030 --> 00:03:49,030 I know that I can hop from page to page. 62 00:03:49,300 --> 00:03:53,440 And since they're nested, eventually there's also going to be a nested layout. 63 00:03:54,280 --> 00:04:00,220 Now let me showcase that this path is always going to be relative to the parent. 64 00:04:00,250 --> 00:04:08,140 So if I add here, a dashboard supports slash and dashboard, which you'll notice that now the parts 65 00:04:08,140 --> 00:04:12,220 are going to be dashboard stats and hopefully you get the gist. 66 00:04:12,610 --> 00:04:13,690 So let's navigate back. 67 00:04:13,690 --> 00:04:16,029 At the moment, we have four or four. 68 00:04:16,390 --> 00:04:16,750 Why? 69 00:04:16,779 --> 00:04:18,670 Well, because there is no page, all jobs. 70 00:04:19,000 --> 00:04:20,230 What page exists there? 71 00:04:20,500 --> 00:04:26,380 There's a forward slash and dashboard, and then we have all jobs, correct? 72 00:04:26,680 --> 00:04:31,150 And once we navigate here, woah, we have all jobs page. 73 00:04:31,480 --> 00:04:37,710 So hopefully this is clear that in order to set up a nested structure, we just need to come up with 74 00:04:37,720 --> 00:04:38,650 a parent throughout. 75 00:04:38,890 --> 00:04:43,270 We need to come up with the URL, which in our case is the home page. 76 00:04:43,810 --> 00:04:48,670 And then whatever route we nest inside of, it will always be relative to this. 77 00:04:48,970 --> 00:04:50,470 And we're still set up the path. 78 00:04:50,500 --> 00:04:54,220 We come up with the URL and we pass in the element.