1
00:00:00,210 --> 00:00:05,460
All right, and once we have the basic setup in place in this video, let's take a look at how we can

2
00:00:05,460 --> 00:00:13,290
add the shared layout, essentially a layout that all of these nested pages will share.

3
00:00:13,830 --> 00:00:17,130
And second, how we can set up the index because at the moment.

4
00:00:18,050 --> 00:00:24,890
You'll notice that once we navigate from the register or login, since we're sending back the user to

5
00:00:24,890 --> 00:00:32,150
the homepage, actually user goes back to a no man's land because there is no page for the home page

6
00:00:32,150 --> 00:00:32,689
at the moment.

7
00:00:33,470 --> 00:00:35,420
And we have stats on job.

8
00:00:35,750 --> 00:00:37,040
And you can read the rest.

9
00:00:37,490 --> 00:00:45,830
Now, as far as the set up in a React router, six, it's power for shared loud first where we have

10
00:00:45,830 --> 00:00:46,460
the parent.

11
00:00:46,850 --> 00:00:48,480
So in our case, that is forward slash.

12
00:00:48,890 --> 00:00:56,270
I know I keep repeating this, but this URL could be anything worse like dashboard for its product and

13
00:00:56,270 --> 00:00:56,870
you get the gist.

14
00:00:57,290 --> 00:01:03,890
We want to set up element, and none of this will be our shared layout and then in that component.

15
00:01:04,930 --> 00:01:09,910
We want to import outlet component from reactor power down Mt..

16
00:01:10,810 --> 00:01:17,140
Also import link because temporarily, I'll set up the navar just so you can see how it works.

17
00:01:17,500 --> 00:01:25,930
But keep in mind that we'll have different setup, so we'll have our sidebars and bars in separate components.

18
00:01:26,230 --> 00:01:28,360
Therefore, again, this is just temporary.

19
00:01:28,750 --> 00:01:30,460
And then we want to render this outlet.

20
00:01:31,000 --> 00:01:36,640
Now I also right away grabbed the wrapper from the wrappers just so I have a little bit of styling.

21
00:01:37,150 --> 00:01:40,240
And then we just need to come up with whatever our structure is going to be.

22
00:01:40,660 --> 00:01:48,310
So in my case, temporarily, I'll add the name bar on top of all my purchase here, but you can set

23
00:01:48,310 --> 00:01:49,240
it up however you want.

24
00:01:49,270 --> 00:01:52,540
So, for example, if you want to set up the footer, you can definitely do so.

25
00:01:52,930 --> 00:01:54,190
So let's get cracking.

26
00:01:54,490 --> 00:01:57,640
And first, we want to do is in the jazz.

27
00:01:57,940 --> 00:02:00,580
We want to set up that element for our parent.

28
00:02:00,980 --> 00:02:05,050
So I'm going to go with element and then we're looking for shared layout.

29
00:02:05,260 --> 00:02:06,790
So that's step number one.

30
00:02:07,240 --> 00:02:10,090
Then we want to navigate to the shared layout.

31
00:02:10,389 --> 00:02:16,900
So I want to go to share layout in the dashboard and then in here, instead of returning a div, let's

32
00:02:16,900 --> 00:02:21,190
import the outlet as well as the link, which again is going to be temporary.

33
00:02:21,310 --> 00:02:23,050
So not the outlet, just the link.

34
00:02:23,350 --> 00:02:27,880
So let me grab the link as well, and let's take that wrapper import.

35
00:02:28,210 --> 00:02:34,180
We're looking for a wrapper and now we want to go to our assets, which is going to be two levels up

36
00:02:34,900 --> 00:02:35,860
and running here.

37
00:02:35,880 --> 00:02:39,820
Let's look for wrappers and more specifically shared layout.

38
00:02:40,240 --> 00:02:45,070
And then as far as the return, like I said, we're going to go here with a wrapper and then we just

39
00:02:45,070 --> 00:02:47,230
need to decide what is going to be our structure.

40
00:02:47,590 --> 00:02:53,920
So my temporary structure is going to be following where I'll have now with few links and then the same

41
00:02:53,920 --> 00:02:54,520
works here.

42
00:02:54,850 --> 00:02:59,150
So we need to have a to prop and where we want to navigate now for time being.

43
00:02:59,170 --> 00:03:03,030
I'm just going to go with add job and learn all jobs.

44
00:03:03,040 --> 00:03:04,780
We don't need to set up all the links again.

45
00:03:05,080 --> 00:03:06,460
This will be temporary.

46
00:03:06,730 --> 00:03:07,930
So hard job.

47
00:03:08,350 --> 00:03:09,550
Now let me set it up.

48
00:03:09,550 --> 00:03:16,660
This one, a new line just so I can copy and paste, and then I'm looking for all jobs and then the

49
00:03:16,660 --> 00:03:19,320
same goes for it next.

50
00:03:19,780 --> 00:03:23,020
And then below the knife, I need to go with my outlook.

51
00:03:23,410 --> 00:03:28,450
So that's where those nested pages will be displayed.

52
00:03:28,900 --> 00:03:30,070
We save it over here.

53
00:03:30,310 --> 00:03:37,930
And if I navigate to my local host 3000, I can see that I have the error because it went with automatic

54
00:03:37,930 --> 00:03:41,430
import and this should be React router Dom.

55
00:03:41,440 --> 00:03:43,900
So let me say it and check it out.

56
00:03:44,260 --> 00:03:47,830
Now I have my number and I have Job-rich correct.

57
00:03:48,140 --> 00:03:54,820
So if I click on all jobs notice now I have this bridge and what that means that eventually we will

58
00:03:54,820 --> 00:03:55,600
have the structure.

59
00:03:56,020 --> 00:03:59,860
So the only thing that's missing right now are the proper components.

60
00:04:00,250 --> 00:04:07,600
So we don't have yet the sidebars, the numbers and all that, but we do have a nice structure.

61
00:04:08,170 --> 00:04:16,420
So all of these pages will be rendered inside of that shared layout and then we can add some stuff that

62
00:04:16,420 --> 00:04:20,410
will be repeated all throughout those nested pages.

63
00:04:20,800 --> 00:04:28,760
And lastly, let's also add that index wrap because at the moment, if I go to my application and yes,

64
00:04:28,780 --> 00:04:31,480
I need to remove that, otherwise I'll navigate away.

65
00:04:31,670 --> 00:04:38,350
So if I'm going to go over here and if I also register and if I log in correctly, so let's say I'm

66
00:04:38,350 --> 00:04:41,290
going to go to John and the famous secret.

67
00:04:42,040 --> 00:04:43,030
Everything is correct.

68
00:04:43,420 --> 00:04:45,760
I navigate to my page.

69
00:04:46,000 --> 00:04:47,080
What do I see or hear?

70
00:04:47,410 --> 00:04:49,660
I have ajob and all dropped.

71
00:04:50,050 --> 00:04:50,410
Why?

72
00:04:50,440 --> 00:04:52,150
Well, because that's my shared layout.

73
00:04:52,390 --> 00:04:59,350
But I actually want to display the page there, and we have two options technically actually in the

74
00:04:59,350 --> 00:04:59,980
register.

75
00:05:00,250 --> 00:05:02,170
I could go to the stats.

76
00:05:02,560 --> 00:05:03,040
Why?

77
00:05:03,280 --> 00:05:05,740
Well, because it is one of the pages that I have.

78
00:05:06,280 --> 00:05:09,760
And then let's imagine that that's the first page that I want to display.

79
00:05:10,210 --> 00:05:17,950
So I still want to stress something where this is my preference to showcase stats as a first one.

80
00:05:18,010 --> 00:05:20,590
You don't have to if you want to go with different one.

81
00:05:20,880 --> 00:05:22,750
That's totally an option.

82
00:05:22,750 --> 00:05:28,990
In my case, I made a decision that the stats will be the first page I display, and that's why it is

83
00:05:28,990 --> 00:05:29,950
my index page.

84
00:05:30,400 --> 00:05:37,060
So yes, we could technically and register pass in forward slash and then start, and technically it's

85
00:05:37,060 --> 00:05:39,520
going to work, but we'll still have this problem.

86
00:05:40,450 --> 00:05:47,650
Where if at some point user goes to a forward slash, meaning our home page, we just display there

87
00:05:47,650 --> 00:05:49,480
in that part, how we can fix that.

88
00:05:49,510 --> 00:05:55,630
Well, where I have the stats or any other page for that matter, instead of path problem, I'm going

89
00:05:55,630 --> 00:05:56,380
to go with index.

90
00:05:56,770 --> 00:06:04,420
And as a result, what you'll notice that once you navigate to the actual home page, now I'll have

91
00:06:04,420 --> 00:06:05,350
the stats page.

92
00:06:05,620 --> 00:06:06,880
So hopefully this is clear.

93
00:06:07,210 --> 00:06:13,000
And let me just stress one more time that whatever the value for URL is going to be, that's going to

94
00:06:13,000 --> 00:06:14,470
be the relative path.

95
00:06:14,740 --> 00:06:21,070
So if we change this around and set this up as a dashboard, then of course, index will also reference

96
00:06:21,250 --> 00:06:23,500
that dashboard instead of homepage.

97
00:06:24,040 --> 00:06:25,450
It's just in this setup.

98
00:06:25,690 --> 00:06:31,660
I went with home page and therefore all of them are relative to the home page and index matches exactly

99
00:06:31,660 --> 00:06:32,350
what I have here.

100
00:06:32,680 --> 00:06:34,420
So indexed will be my homepage.

101
00:06:34,780 --> 00:06:40,010
And as far as the element, well, that is going to be the stats one.

102
00:06:40,600 --> 00:06:46,510
So that's how we can set up nested page structure in React rather.