1
00:00:01,174 --> 00:00:02,550
‫In this lecture,

2
00:00:02,550 --> 00:00:04,800
‫let's learn how we can implement

3
00:00:04,800 --> 00:00:08,793
‫a global application layout using React Router.

4
00:00:10,320 --> 00:00:14,400
‫And let's start by actually first building that layout

5
00:00:14,400 --> 00:00:18,765
‫so that we can then connect it with our Router here.

6
00:00:18,765 --> 00:00:22,410
‫So what I want to do is to create a layout

7
00:00:22,410 --> 00:00:25,842
‫that is going to work both for big screens

8
00:00:25,842 --> 00:00:30,270
‫like this one here, or even for mobile phones,

9
00:00:30,270 --> 00:00:32,940
‫so for really small screens.

10
00:00:32,940 --> 00:00:36,958
‫So what I want to do is to create a header up here

11
00:00:36,958 --> 00:00:41,177
‫with the name of the company and a link to the homepage

12
00:00:41,177 --> 00:00:43,599
‫and maybe the username as well.

13
00:00:43,599 --> 00:00:45,651
‫Then the main part of the page

14
00:00:45,651 --> 00:00:48,600
‫should be for the content itself.

15
00:00:48,600 --> 00:00:52,980
‫So like the pizza menu or for the current cart view.

16
00:00:52,980 --> 00:00:56,490
‫And then down here I want to have like an overview

17
00:00:56,490 --> 00:01:00,900
‫of the cart that is always visible on all the pages.

18
00:01:00,900 --> 00:01:04,163
‫So basically that displays how many items are in the cart

19
00:01:04,163 --> 00:01:06,600
‫and a link to the cart.

20
00:01:06,600 --> 00:01:09,809
‫So to make that very important part of the application

21
00:01:09,809 --> 00:01:12,660
‫always accessible from everywhere.

22
00:01:12,660 --> 00:01:14,372
‫And so this cart overview

23
00:01:14,372 --> 00:01:18,480
‫and the header will be part of the layout,

24
00:01:18,480 --> 00:01:21,640
‫so the part of the application that is always visible

25
00:01:21,640 --> 00:01:23,476
‫while the only thing that changes

26
00:01:23,476 --> 00:01:26,220
‫is then this part here in the middle,

27
00:01:26,220 --> 00:01:28,914
‫which again, can be the menu or the cart,

28
00:01:28,914 --> 00:01:32,105
‫or the form to create a new order.

29
00:01:32,105 --> 00:01:37,050
‫All right, so let's create a new component here

30
00:01:37,050 --> 00:01:38,472
‫inside the UI folder.

31
00:01:38,472 --> 00:01:42,901
‫And let's, so actually not a folder, but a new file.

32
00:01:42,901 --> 00:01:46,091
‫And let's again call it app layout,

33
00:01:46,091 --> 00:01:51,091
‫just like we did also in the World Wise application.

34
00:01:51,738 --> 00:01:54,360
‫So using our snippet here,

35
00:01:54,360 --> 00:01:57,120
‫and then here we want that header.

36
00:01:57,120 --> 00:02:01,097
‫And again, we need to create a new component for that here

37
00:02:01,097 --> 00:02:02,973
‫'cause we don't have that yet.

38
00:02:03,988 --> 00:02:08,040
‫And again, this is one of these UI components.

39
00:02:08,040 --> 00:02:13,040
‫So a component that doesn't fit into any of these features.

40
00:02:14,550 --> 00:02:19,550
‫So Header.JSX, and that start with this one actually.

41
00:02:22,050 --> 00:02:25,740
‫So here, let's make it a header element.

42
00:02:25,740 --> 00:02:28,050
‫And then as I was saying, here,

43
00:02:28,050 --> 00:02:30,510
‫let's for now just start with a link

44
00:02:30,510 --> 00:02:33,826
‫that always allows us to go back to the homepage.

45
00:02:33,826 --> 00:02:38,015
‫So this is something very common in all web applications.

46
00:02:38,015 --> 00:02:41,964
‫So let's import that from react-router-dom.

47
00:02:41,964 --> 00:02:46,964
‫And then here the link goes to the root URL basically.

48
00:02:48,060 --> 00:02:52,830
‫And then here the name of the application

49
00:02:52,830 --> 00:02:57,630
‫or the company in this case, so Fast React Pizza Company.

50
00:02:57,630 --> 00:03:01,121
‫And so this is going to act a little bit like the logo here.

51
00:03:01,121 --> 00:03:04,643
‫Then later we will have some username here as well.

52
00:03:04,643 --> 00:03:09,643
‫Let's just put something static here for now.

53
00:03:12,150 --> 00:03:14,697
‫And with this we can close this

54
00:03:14,697 --> 00:03:18,183
‫and then start to include that here in our layout.

55
00:03:19,594 --> 00:03:24,150
‫So for some reason the automatic imports

56
00:03:24,150 --> 00:03:25,623
‫are not really working here.

57
00:03:28,980 --> 00:03:30,273
‫So from,

58
00:03:32,010 --> 00:03:33,310
‫and then we need to go up

59
00:03:34,611 --> 00:03:39,611
‫or actually it's right in this same folder.

60
00:03:39,660 --> 00:03:43,773
‫So you want the Header, then we will want the main content.

61
00:03:45,180 --> 00:03:49,560
‫So let's place that inside a main HTML element.

62
00:03:49,560 --> 00:03:53,343
‫And then for now, let's just place one h1 here.

63
00:03:55,380 --> 00:03:57,090
‫So for the content,

64
00:03:57,090 --> 00:04:01,230
‫and then here we want that cart overview as I was saying.

65
00:04:01,230 --> 00:04:04,113
‫So that component we actually already have.

66
00:04:05,100 --> 00:04:08,670
‫So it's just some static HTML here for now.

67
00:04:08,670 --> 00:04:11,700
‫But that's going to work for now.

68
00:04:11,700 --> 00:04:15,120
‫Also notice that there is no styling here anywhere.

69
00:04:15,120 --> 00:04:18,480
‫So there are no class names or anywhere to be seen.

70
00:04:18,480 --> 00:04:21,060
‫And that's just because we are going to style this

71
00:04:21,060 --> 00:04:24,417
‫using Tailwind in the next section.

72
00:04:24,417 --> 00:04:28,530
‫Now here, notice how we have a link to the cart.

73
00:04:28,530 --> 00:04:33,150
‫And so let's actually replace this anchor element here

74
00:04:33,150 --> 00:04:36,903
‫with again, the link from React Router.

75
00:04:40,200 --> 00:04:41,560
‫So going to cart

76
00:04:45,060 --> 00:04:47,163
‫and then here closing the link.

77
00:04:48,930 --> 00:04:50,544
‫And nice.

78
00:04:50,544 --> 00:04:54,183
‫So then let's here also include that.

79
00:04:55,019 --> 00:04:56,269
‫So CartOverview

80
00:05:01,320 --> 00:05:04,980
‫and importing that manually Overview from,

81
00:05:10,612 --> 00:05:14,073
‫now here, we actually need to go up a few,

82
00:05:15,450 --> 00:05:17,430
‫or at least yeah, one.

83
00:05:17,430 --> 00:05:20,310
‫So into the features, into the cart,

84
00:05:20,310 --> 00:05:23,603
‫and then CartOverview.

85
00:05:23,603 --> 00:05:25,800
‫Now, okay, and with this,

86
00:05:25,800 --> 00:05:29,190
‫we have our app layouts done for now.

87
00:05:29,190 --> 00:05:32,550
‫So the header, the content, and the cart overview.

88
00:05:32,550 --> 00:05:35,400
‫And so now how do we connect this here

89
00:05:35,400 --> 00:05:38,019
‫with our Router definition?

90
00:05:38,019 --> 00:05:40,916
‫Well remember how we did something similar

91
00:05:40,916 --> 00:05:44,463
‫earlier in the World Wise application.

92
00:05:45,660 --> 00:05:49,770
‫So remember how here we also had the AppLayout component

93
00:05:49,770 --> 00:05:54,599
‫inside this route here, so as the element for this route.

94
00:05:54,599 --> 00:05:59,599
‫And we then had all these routes here as nested routes,

95
00:06:00,390 --> 00:06:04,350
‫so routes that are rendered inside this parent route.

96
00:06:04,350 --> 00:06:07,907
‫And so here we can do something similar.

97
00:06:07,907 --> 00:06:11,010
‫So basically we can do the exact same thing

98
00:06:11,010 --> 00:06:12,495
‫but with a different syntax

99
00:06:12,495 --> 00:06:17,070
‫inside this new createBrowserRouter function.

100
00:06:17,070 --> 00:06:19,740
‫So the way that we define child routes,

101
00:06:19,740 --> 00:06:24,740
‫so nested routes, is by defining the children property.

102
00:06:25,110 --> 00:06:29,894
‫And so children then accepts another array of routes.

103
00:06:29,894 --> 00:06:32,430
‫Now we don't want to do that here,

104
00:06:32,430 --> 00:06:35,787
‫but really here basically as the parent route

105
00:06:35,787 --> 00:06:37,773
‫of all these other routes.

106
00:06:39,270 --> 00:06:42,450
‫So let's create a new object here.

107
00:06:42,450 --> 00:06:46,530
‫And here the element that we want is that app layout

108
00:06:46,530 --> 00:06:47,793
‫that we just created.

109
00:06:49,680 --> 00:06:51,510
‫So this one right here.

110
00:06:51,510 --> 00:06:53,759
‫And here, we don't need any path

111
00:06:53,759 --> 00:06:57,450
‫which will then effectively make this a layout route.

112
00:06:57,450 --> 00:06:58,980
‫So basically a route,

113
00:06:58,980 --> 00:07:02,310
‫but the only purpose of providing a layout

114
00:07:02,310 --> 00:07:03,840
‫to the application.

115
00:07:03,840 --> 00:07:06,210
‫And so then as I was saying earlier,

116
00:07:06,210 --> 00:07:10,498
‫we need to make all of this year their child routes.

117
00:07:10,498 --> 00:07:13,200
‫So basically the nested routes.

118
00:07:13,200 --> 00:07:17,670
‫And so we define this children property here

119
00:07:17,670 --> 00:07:21,480
‫and then we pass it a new array of routes.

120
00:07:21,480 --> 00:07:26,480
‫So we grab all of this, cut that and paste that here.

121
00:07:26,880 --> 00:07:28,350
‫And if I now save this,

122
00:07:28,350 --> 00:07:31,920
‫then we should immediately see that result here.

123
00:07:31,920 --> 00:07:35,310
‫And indeed, that worked beautifully.

124
00:07:35,310 --> 00:07:40,110
‫So here we have now this pizza overview and here the header.

125
00:07:40,110 --> 00:07:44,070
‫So if I click here, it'll go to the cart as we see here.

126
00:07:44,070 --> 00:07:46,030
‫And then here it goes back.

127
00:07:46,030 --> 00:07:49,650
‫However, of course here we are still showing

128
00:07:49,650 --> 00:07:53,820
‫the exact same h1 content in all pages.

129
00:07:53,820 --> 00:07:57,523
‫And that's simply because we didn't tell the app layout yet

130
00:07:57,523 --> 00:07:59,872
‫to use the child route.

131
00:07:59,872 --> 00:08:02,880
‫So basically we didn't tell this component

132
00:08:02,880 --> 00:08:06,672
‫where to render the child route content.

133
00:08:06,672 --> 00:08:09,875
‫So right now that would be this element here.

134
00:08:09,875 --> 00:08:13,234
‫So we want this element then to be shown here.

135
00:08:13,234 --> 00:08:15,870
‫And if we are in the cart URL,

136
00:08:15,870 --> 00:08:20,870
‫then we of course want this cart element to be shown here.

137
00:08:20,910 --> 00:08:22,740
‫And remember how we do that.

138
00:08:22,740 --> 00:08:27,060
‫So basically remember how we render the content

139
00:08:27,060 --> 00:08:30,604
‫of a nested route inside another route.

140
00:08:30,604 --> 00:08:35,013
‫Well, maybe you remember the outlet component.

141
00:08:35,850 --> 00:08:39,303
‫So Outlet provided by react-router-dom,

142
00:08:40,650 --> 00:08:43,128
‫and there it is.

143
00:08:43,128 --> 00:08:45,990
‫Now it's a bit difficult to see here now

144
00:08:45,990 --> 00:08:48,394
‫because all of this is not really styled,

145
00:08:48,394 --> 00:08:50,250
‫but I think you can see

146
00:08:50,250 --> 00:08:52,530
‫that this here is basically the cart.

147
00:08:52,530 --> 00:08:54,714
‫So here if we go back to menu

148
00:08:54,714 --> 00:08:57,752
‫so then we will go here to /menu,

149
00:08:57,752 --> 00:09:00,090
‫then indeed we get the menu.

150
00:09:00,090 --> 00:09:03,180
‫Or if we go back to the homepage by clicking here

151
00:09:03,180 --> 00:09:04,983
‫then we have that h1 there.

152
00:09:06,270 --> 00:09:07,830
‫So inside this main,

153
00:09:07,830 --> 00:09:10,706
‫we now really only want that content

154
00:09:10,706 --> 00:09:13,410
‫and no longer that h1.

155
00:09:13,410 --> 00:09:17,670
‫And so with this, we now have our layout in place.

156
00:09:17,670 --> 00:09:20,963
‫So let's just quickly recap what we just did here.

157
00:09:20,963 --> 00:09:24,600
‫So we created this app layout component here

158
00:09:24,600 --> 00:09:27,600
‫which we will want to use as the parent route

159
00:09:27,600 --> 00:09:31,635
‫of every single other route that we have in our application.

160
00:09:31,635 --> 00:09:33,426
‫And so that's why we placed

161
00:09:33,426 --> 00:09:36,583
‫that app layout element right here,

162
00:09:36,583 --> 00:09:38,550
‫basically at the top.

163
00:09:38,550 --> 00:09:40,860
‫And then we made all the other routes

164
00:09:40,860 --> 00:09:43,950
‫child routes of the app layout.

165
00:09:43,950 --> 00:09:46,257
‫So they are all nested routes now.

166
00:09:46,257 --> 00:09:49,032
‫And so then inside the parent route,

167
00:09:49,032 --> 00:09:51,630
‫we can use the outlet component

168
00:09:51,630 --> 00:09:55,080
‫to render whatever is the current nested route.

169
00:09:55,080 --> 00:09:55,913
‫And so again,

170
00:09:55,913 --> 00:09:58,023
‫this is similar to what we did earlier

171
00:09:58,023 --> 00:10:00,900
‫here in the World Wise application.

172
00:10:00,900 --> 00:10:03,420
‫The difference was that we didn't have the app

173
00:10:03,420 --> 00:10:06,666
‫layout component as the parent component

174
00:10:06,666 --> 00:10:10,410
‫so the parent layout of the entire page,

175
00:10:10,410 --> 00:10:12,484
‫it was really only of that part

176
00:10:12,484 --> 00:10:14,970
‫that was the visible application

177
00:10:14,970 --> 00:10:16,382
‫with the map on the right side

178
00:10:16,382 --> 00:10:19,680
‫and that sidebar with the cities.

179
00:10:19,680 --> 00:10:21,360
‫So remember that?

180
00:10:21,360 --> 00:10:23,297
‫But then outside of that app layout,

181
00:10:23,297 --> 00:10:26,324
‫here we also had all these other pages

182
00:10:26,324 --> 00:10:28,213
‫that had a different layout.

183
00:10:28,213 --> 00:10:31,320
‫So this was a different application.

184
00:10:31,320 --> 00:10:33,693
‫And so we did things in a different way,

185
00:10:33,693 --> 00:10:37,140
‫but here this is how we do it.

186
00:10:37,140 --> 00:10:40,050
‫So we have just one layout all the time.

187
00:10:40,050 --> 00:10:42,150
‫It never changes throughout the app.

188
00:10:42,150 --> 00:10:43,020
‫And so therefore,

189
00:10:43,020 --> 00:10:47,220
‫this is basically our parent route of all other routes.

190
00:10:47,220 --> 00:10:49,050
‫And as I mentioned earlier,

191
00:10:49,050 --> 00:10:51,180
‫since this one doesn't have a path,

192
00:10:51,180 --> 00:10:53,880
‫it is technically called in React Router

193
00:10:53,880 --> 00:10:56,027
‫a layout route now.

194
00:10:56,027 --> 00:10:57,330
‫All right.

195
00:10:57,330 --> 00:10:59,988
‫But that's enough talk about layouts.

196
00:10:59,988 --> 00:11:03,480
‫Now let's actually get to fetching data,

197
00:11:03,480 --> 00:11:05,848
‫which is, as I mentioned earlier,

198
00:11:05,848 --> 00:11:10,440
‫the main new feature of React Router 6.4.

199
00:11:10,440 --> 00:11:11,880
‫And it's the whole reason

200
00:11:11,880 --> 00:11:15,783
‫why we declared our routes like this in the first place.