1 00:00:00,050 --> 00:00:00,380 All right. 2 00:00:00,380 --> 00:00:05,150 And up next, let's talk about how we can set up nested routes in React router. 3 00:00:05,180 --> 00:00:06,050 You see? 4 00:00:06,840 --> 00:00:11,070 Our current setup is awesome, but what if we want to have a nav bar? 5 00:00:11,740 --> 00:00:15,520 Well, you can make an argument that we can set up the components folder in there. 6 00:00:15,520 --> 00:00:19,270 We can set up the navbar component, we can import in all the pages. 7 00:00:19,270 --> 00:00:20,460 And all of that is good. 8 00:00:20,470 --> 00:00:22,450 But what if I have more pages? 9 00:00:22,450 --> 00:00:24,130 What if I have 15 pages? 10 00:00:24,130 --> 00:00:26,380 What if I want to add the footer at the bottom? 11 00:00:26,380 --> 00:00:30,910 As you can see, there has to be an easier and faster option. 12 00:00:31,090 --> 00:00:35,230 And also in React router, the errors bubble up. 13 00:00:35,230 --> 00:00:42,340 So once we set up the nested routes, we'll be able to add the error page for all of our pages. 14 00:00:42,370 --> 00:00:47,740 Now I can tell it right away that this is somewhat tricky topic, so please don't rush. 15 00:00:48,540 --> 00:00:49,650 Through this video. 16 00:00:49,680 --> 00:00:52,920 And yes, I'll purposely do everything step by step. 17 00:00:52,920 --> 00:00:58,080 So first thing we need to do is to decide which is going to be our parent route. 18 00:00:58,230 --> 00:01:04,019 So at the moment we have these four routes and the one that makes the most sense is the home one. 19 00:01:04,290 --> 00:01:10,680 Basically, home route is going to be parent for rest of the routes, the register login and the dashboard. 20 00:01:10,680 --> 00:01:15,930 And as a side note, later on in the project, we'll set up a dashboard as a. 21 00:01:16,880 --> 00:01:18,110 Parent as well. 22 00:01:18,110 --> 00:01:19,820 So that is coming up. 23 00:01:19,860 --> 00:01:24,470 And essentially, once we decide on the parent, here's what we want to do. 24 00:01:25,010 --> 00:01:32,150 We'll keep the element for now, but we need to add the children prop and we need to set the children 25 00:01:32,150 --> 00:01:34,460 prop equal again to an array. 26 00:01:34,460 --> 00:01:41,410 And now these pages or whichever page you want to set up here as a child, you just want to. 27 00:01:42,460 --> 00:01:43,540 Add as an object. 28 00:01:43,540 --> 00:01:45,700 So this doesn't change the syntax. 29 00:01:45,700 --> 00:01:47,110 So here's what we can do. 30 00:01:47,140 --> 00:01:53,500 We can just cut it out from the Create browser router and set it up here in the children. 31 00:01:53,530 --> 00:02:00,310 Now, once we do that, we need to understand that all of these URLs effectively are going to be relative 32 00:02:00,340 --> 00:02:01,630 to the parent one. 33 00:02:01,720 --> 00:02:05,380 So again, in our case the parent is the home page. 34 00:02:05,740 --> 00:02:09,520 So in this case it's not going to make that much difference. 35 00:02:09,520 --> 00:02:14,710 But once we do that for Dashboard, yes, you'll definitely see that in action. 36 00:02:14,710 --> 00:02:23,260 So let's say if there is a child inside of the dashboard and the URL is stats, the URL is not going 37 00:02:23,260 --> 00:02:28,000 to be our domain and then stats, it's going to be our domain. 38 00:02:28,180 --> 00:02:34,330 So in our case localhost 5173 and then dashboard and then stats. 39 00:02:34,330 --> 00:02:36,220 And again all of this is coming up. 40 00:02:36,220 --> 00:02:37,600 So here's what we want to do. 41 00:02:37,630 --> 00:02:40,060 We want to remove those forward slashes. 42 00:02:40,090 --> 00:02:43,640 Again, this is going to be relative to whatever is the parent. 43 00:02:43,640 --> 00:02:48,110 And since the parent is the home route, well, I mean, we remove the forward slash. 44 00:02:48,110 --> 00:02:51,860 And again, this is going to be relative in this case. 45 00:02:51,890 --> 00:02:57,890 Like I said, since our parent is the home route, it doesn't make that much difference. 46 00:02:57,890 --> 00:03:04,490 And once we save, you'll notice something interesting where essentially if I navigate to a register, 47 00:03:04,490 --> 00:03:09,320 I won't be able to see the content, I'll still see the home layout. 48 00:03:09,440 --> 00:03:16,040 So this is the tricky part where again, there are multiple steps we need to take in order to get the 49 00:03:16,040 --> 00:03:16,970 complete setup. 50 00:03:16,970 --> 00:03:20,930 So now we have the parent, we also have children. 51 00:03:21,260 --> 00:03:28,640 Now we want to go to a home layout and grab the outlet component because at the moment, if we'll navigate 52 00:03:28,640 --> 00:03:33,320 to any of these pages like we just saw with Register, we'll see this home layout over here. 53 00:03:33,780 --> 00:03:36,180 So let's navigate to a home layout. 54 00:03:36,180 --> 00:03:41,760 And as I said, that's why I named this page Home layout, because technically, in my opinion, it's 55 00:03:41,760 --> 00:03:45,300 more of a layout than the actual page. 56 00:03:45,300 --> 00:03:52,530 So let's go over here and again we'll have to set up a div here because we'll have multiple elements 57 00:03:52,530 --> 00:03:55,080 and we can return technically only one. 58 00:03:56,280 --> 00:04:02,700 And inside of this div somewhere, anywhere in this div we're going to go with outlet. 59 00:04:02,880 --> 00:04:06,720 So that's the component we want to grab from React router dom. 60 00:04:06,900 --> 00:04:08,370 And here's the result. 61 00:04:08,400 --> 00:04:14,580 Whatever content we have in the child pages is going to be displayed over here in the outlet. 62 00:04:14,610 --> 00:04:20,329 Now, I do want to remove the semicolon over here and instead of the heading one, the home layout. 63 00:04:20,339 --> 00:04:25,800 Well, let me just set it up as a navbar just to demonstrate the. 64 00:04:26,510 --> 00:04:28,130 A result that we get. 65 00:04:28,260 --> 00:04:31,340 And here I can just type nav bar once I save. 66 00:04:31,370 --> 00:04:35,240 Notice as we navigate from page to page. 67 00:04:35,240 --> 00:04:37,970 And of course, in this case we're just looking for register and login. 68 00:04:37,970 --> 00:04:40,940 But also we can do that in the dashboard. 69 00:04:40,970 --> 00:04:42,770 You'll notice this nav bar. 70 00:04:42,800 --> 00:04:44,900 So this is what we're sharing. 71 00:04:45,610 --> 00:04:55,120 All across the pages and whatever content we have inside of the actual page, whatever divs or elements 72 00:04:55,120 --> 00:04:59,230 we're returning, that of course is going to be displayed here in the outlet. 73 00:04:59,230 --> 00:05:05,710 And as you can see, whatever I place around this outlet is going to be displayed in all of the pages. 74 00:05:05,830 --> 00:05:10,630 Now one last thing we need to fix if we at the moment navigate. 75 00:05:11,350 --> 00:05:12,970 To the actual home page. 76 00:05:12,970 --> 00:05:15,310 Notice we only display the nav bar. 77 00:05:15,980 --> 00:05:19,820 So we have the home layout, but there's no actual page. 78 00:05:20,490 --> 00:05:24,300 Which is displayed if we navigate to a home one. 79 00:05:24,330 --> 00:05:25,740 Let's take a look at our app. 80 00:05:26,190 --> 00:05:27,660 So notice we have the path. 81 00:05:27,660 --> 00:05:28,950 We have the element. 82 00:05:28,950 --> 00:05:33,720 And technically, yeah, when we go to the forward slash the home page, we display the home layout. 83 00:05:33,720 --> 00:05:37,710 But inside of that home layout, we only have the nav bar. 84 00:05:38,070 --> 00:05:40,350 This is for the children. 85 00:05:40,350 --> 00:05:40,980 Correct. 86 00:05:41,010 --> 00:05:42,750 So here's what we want to do. 87 00:05:43,140 --> 00:05:48,340 We want to set up the index page for our parent as well. 88 00:05:48,360 --> 00:05:54,600 And in order to do that, we'll first need to decide which is going to be our index page. 89 00:05:54,600 --> 00:06:01,950 And technically, you can set up any of these pages as an index page, but in my case I will set up 90 00:06:01,950 --> 00:06:04,550 the landing one as my index one. 91 00:06:04,560 --> 00:06:08,700 So let me go to the children and the location here is irrelevant. 92 00:06:08,700 --> 00:06:11,010 You can set it up as a first one, last one. 93 00:06:11,550 --> 00:06:14,440 As long as you have the index, that's the one that controls it. 94 00:06:14,460 --> 00:06:16,800 So we'll say here, index true. 95 00:06:16,800 --> 00:06:20,110 And then comma and now what element we want to display. 96 00:06:20,110 --> 00:06:22,800 Well now I want to go with the landing page. 97 00:06:22,810 --> 00:06:24,880 Let's save and check it out. 98 00:06:24,910 --> 00:06:32,920 Basically, this is going to be the page whenever we navigate to the forward slash, right? 99 00:06:32,920 --> 00:06:35,740 So we'll have the home layout that stays. 100 00:06:36,280 --> 00:06:42,280 This one pretty much has the outlet and all that, but the index one is going to be displayed when we 101 00:06:42,280 --> 00:06:45,040 go to the parent route. 102 00:06:45,070 --> 00:06:46,540 Hopefully that is clear. 103 00:06:46,540 --> 00:06:52,030 And with this in place we have a setup for nested routes in React router Dom. 104 00:06:52,180 --> 00:06:59,560 Again, we want to decide on the parent, we want to set up the children and if we want to display some 105 00:06:59,560 --> 00:07:06,460 kind of page when we navigate to the parent route, we need to come up with the element in our case 106 00:07:06,460 --> 00:07:08,860 landing and set index to true. 107 00:07:08,920 --> 00:07:14,200 And all of them pretty much are going to be relative to the parent route. 108 00:07:14,320 --> 00:07:20,620 And also, I just want to mention that technically we won't use this shared layout approach for the 109 00:07:20,620 --> 00:07:21,550 home layout. 110 00:07:21,880 --> 00:07:26,590 We'll actually implement it once we set up the dashboard page. 111 00:07:26,590 --> 00:07:29,020 So this was here just for demonstration purposes. 112 00:07:29,020 --> 00:07:36,790 Whatever elements you set around the outlet are going to be displayed in all children pages.