1
00:00:02,000 --> 00:00:04,000
When building more complex React apps

2
00:00:04,000 --> 00:00:07,000
with Routing, it's quite common that some routes should also

3
00:00:07,000 --> 00:00:10,000
have shared layout elements.

4
00:00:10,000 --> 00:00:14,000
For example, this main navigation bar here at the top,

5
00:00:14,000 --> 00:00:17,000
should probably be visible on all routes we have.

6
00:00:17,000 --> 00:00:20,000
And to achieve this, you can add so-called layout routes.

7
00:00:20,000 --> 00:00:23,000
Which are actually just normal routes

8
00:00:23,000 --> 00:00:27,000
but routes that nest other routes inside of them.

9
00:00:27,000 --> 00:00:29,000
To add such a layout route,

10
00:00:29,000 --> 00:00:31,000
we could add a new route definition.

11
00:00:31,000 --> 00:00:33,000
The position in the array doesn't really matter here

12
00:00:33,000 --> 00:00:35,000
but I'll add it as the first route.

13
00:00:35,000 --> 00:00:40,000
And then here the path is still / nothing,

14
00:00:40,000 --> 00:00:42,000
because I want to create a layout that wraps all routes

15
00:00:42,000 --> 00:00:44,000
no matter which path they have.

16
00:00:46,000 --> 00:00:48,000
Then we have to add an element and here,

17
00:00:48,000 --> 00:00:51,000
I need to add a new component.

18
00:00:51,000 --> 00:00:54,000
And for that I'll actually add a new folder, called routes,

19
00:00:54,000 --> 00:00:57,000
to organize my components differently now.

20
00:00:57,000 --> 00:00:59,000
The components which are used as routes,

21
00:00:59,000 --> 00:01:01,000
should go into the routes folder,

22
00:01:01,000 --> 00:01:04,000
and the other components which are used somewhere else,

23
00:01:04,000 --> 00:01:06,000
will stay in the components folder.

24
00:01:06,000 --> 00:01:08,000
This is not needed technically,

25
00:01:08,000 --> 00:01:11,000
but makes this app a bit easier to maintain and understand.

26
00:01:12,000 --> 00:01:15,000
In this routes folder, I'll add a RootLayout.jsx file,

27
00:01:15,000 --> 00:01:18,000
though the file name, of course, is up to you.

28
00:01:18,000 --> 00:01:21,000
In there, we create a regular component function,

29
00:01:21,000 --> 00:01:23,000
which could be called RootLayout,

30
00:01:23,000 --> 00:01:25,000
and which is of course exported.

31
00:01:26,000 --> 00:01:30,000
And then here, I wanna return a fragment

32
00:01:30,000 --> 00:01:32,000
where I have my MainHeader,

33
00:01:33,000 --> 00:01:36,000
and then something else which I'll add soon.

34
00:01:37,000 --> 00:01:39,000
For the moment, it's just a MainHeader.

35
00:01:39,000 --> 00:01:43,000
And that should be a layout route which is wrapped around

36
00:01:43,000 --> 00:01:45,000
other routes so that the MainHeader is shared

37
00:01:45,000 --> 00:01:47,000
and then the content of the upper routes

38
00:01:47,000 --> 00:01:49,000
is rendered below this MainHeader.

39
00:01:51,000 --> 00:01:53,000
To make this work, back in main.jsx,

40
00:01:53,000 --> 00:01:58,000
we can import the RootLayout route from routes/RootLayout,

41
00:01:59,000 --> 00:02:02,000
and set this as an element here like this.

42
00:02:03,000 --> 00:02:06,000
And now the important part that must be added here,

43
00:02:06,000 --> 00:02:09,000
to make this a layout route, is that we add another key

44
00:02:09,000 --> 00:02:10,000
to the route definition.

45
00:02:10,000 --> 00:02:13,000
And that's the children key, which takes an array

46
00:02:13,000 --> 00:02:17,000
and it takes an array of more route definitions.

47
00:02:18,000 --> 00:02:20,000
And here, I'll then move these two route definitions

48
00:02:20,000 --> 00:02:24,000
into this RootLayout route definition.

49
00:02:24,000 --> 00:02:27,000
And that turns this RootLayout route definition

50
00:02:27,000 --> 00:02:30,000
into a layout route of these two routes.

51
00:02:30,000 --> 00:02:32,000
Because these two routes are now nested routes

52
00:02:32,000 --> 00:02:36,000
to this route here, and they share the layout provided

53
00:02:36,000 --> 00:02:38,000
by that route.

54
00:02:38,000 --> 00:02:42,000
They simply are inserted into this RootLayout component,

55
00:02:42,000 --> 00:02:44,000
and therefore they share this MainHeader.

56
00:02:45,000 --> 00:02:48,000
However, if we save this you see that, yeah,

57
00:02:48,000 --> 00:02:51,000
the header is there, but the content is missing,

58
00:02:51,000 --> 00:02:53,000
and clicking New Post also doesn't do anything.

59
00:02:54,000 --> 00:02:56,000
The reason for that is that indeed,

60
00:02:56,000 --> 00:03:01,000
we are now sharing this MainHeader component,

61
00:03:01,000 --> 00:03:04,000
but we're not telling react-router where

62
00:03:04,000 --> 00:03:07,000
to render the content of these nested routes.

63
00:03:07,000 --> 00:03:10,000
And that is of course, something we should do.

64
00:03:10,000 --> 00:03:13,000
And we do that by going to the RootLayout

65
00:03:13,000 --> 00:03:18,000
and importing an Outlet component from react-router-dom.

66
00:03:18,000 --> 00:03:21,000
That's a special component provided by

67
00:03:21,000 --> 00:03:24,000
the react-router package, which should be rendered

68
00:03:24,000 --> 00:03:28,000
in the place where the actual nested route content

69
00:03:28,000 --> 00:03:31,000
should be rendered, should be injected, so to say.

70
00:03:31,000 --> 00:03:34,000
So this is simply a placeholder where

71
00:03:34,000 --> 00:03:37,000
the nested routes can render their content

72
00:03:37,000 --> 00:03:38,000
in the RootLayout.

73
00:03:39,000 --> 00:03:41,000
And therefore with Outlet added here,

74
00:03:41,000 --> 00:03:43,000
in RootLayout, below the MainHeader,

75
00:03:43,000 --> 00:03:47,000
if we save this, we now got the app component content back.

76
00:03:47,000 --> 00:03:50,000
And therefore, I now also have two headers here,

77
00:03:50,000 --> 00:03:53,000
because at the moment, the App component, of course,

78
00:03:53,000 --> 00:03:56,000
still brings its own MainHeader.

79
00:03:56,000 --> 00:03:58,000
But that's what we can tackle next.

80
00:03:58,000 --> 00:04:01,000
It's now time to refactor the code a little bit

81
00:04:01,000 --> 00:04:03,000
and clean it up a little bit to make sure

82
00:04:03,000 --> 00:04:06,000
that we don't have this duplicate header here, for example.