1
00:00:00,330 --> 00:00:00,730
All right.

2
00:00:00,770 --> 00:00:06,510
And now let's set up the structure for the rest of the pages and since we will be setting a single page

3
00:00:06,510 --> 00:00:07,140
application.

4
00:00:07,710 --> 00:00:15,240
Arguably the most popular routing solution is by far React router, and right before I started recording

5
00:00:15,690 --> 00:00:16,530
what's really cool?

6
00:00:16,920 --> 00:00:19,020
They just released version six.

7
00:00:19,410 --> 00:00:27,270
So we'll get to work with the latest goodies they have to offer now since it's a intermediate course.

8
00:00:27,630 --> 00:00:32,490
My assumption is that you are already familiar with the React router basics.

9
00:00:32,910 --> 00:00:39,510
Essentially, you have used one of the previous versions and therefore my main focus will be on the

10
00:00:39,510 --> 00:00:41,760
new setup, not the general idea.

11
00:00:42,360 --> 00:00:49,810
Also, if you want to find out more info on React router, you married me, you will find a link back

12
00:00:49,860 --> 00:00:54,390
to Paradox, which I might utilize from time to time.

13
00:00:55,020 --> 00:00:58,890
And first of all, we need to do is install these dependencies.

14
00:00:59,310 --> 00:01:03,330
So let me stop my server now, and we're going to go with the command.

15
00:01:04,410 --> 00:01:11,160
And this is the cool thing where now I can just copy and paste and install it, and then the setup is

16
00:01:11,160 --> 00:01:15,740
pretty much the same where we want to import barrels and water.

17
00:01:16,030 --> 00:01:17,280
And start it up here.

18
00:01:18,000 --> 00:01:22,530
So let me go here with npm starts, so I'm restarting my server.

19
00:01:23,070 --> 00:01:25,320
And like I said, setup is pretty much the same.

20
00:01:25,770 --> 00:01:32,790
We're still looking for a browser router, which is going to connect to browsers URL, but instead of

21
00:01:32,790 --> 00:01:36,120
Switch, we're using roots component.

22
00:01:36,570 --> 00:01:38,160
So all of these are still components.

23
00:01:38,580 --> 00:01:42,480
But instead of switch like we did in the version five, for example.

24
00:01:42,930 --> 00:01:48,870
Now we're using A-roads component, and it really shines when we need to set up nested routing, which

25
00:01:48,870 --> 00:01:53,910
we're going to do because in the dashboard, actually it will have pages.

26
00:01:54,390 --> 00:02:00,690
So not only we're going to have the home page, which is going to be a dashboard, then register landing

27
00:02:00,690 --> 00:02:06,820
and then the error page in the dashboard, there's going to be a nested page structure.

28
00:02:06,840 --> 00:02:08,820
So there's going to be stats, all jobs.

29
00:02:09,210 --> 00:02:10,770
And you can read the rest.

30
00:02:10,979 --> 00:02:16,470
And when it comes to the routing, that's where your roots truly shines because it makes it very easy

31
00:02:16,470 --> 00:02:17,040
to set it up.

32
00:02:17,120 --> 00:02:19,620
And of course, there's also a root component.

33
00:02:19,950 --> 00:02:26,610
So that's where we specifically say, Well, what is going to be the root for our page and link, which

34
00:02:26,610 --> 00:02:28,410
we're going to use in an app now?

35
00:02:28,890 --> 00:02:31,590
In our case, there's not going to be the main nav.

36
00:02:32,160 --> 00:02:38,820
As you can see, we have register, we have landing page, but the nav will be actually in the dashboard.

37
00:02:39,240 --> 00:02:46,890
So in the nested structure, that's when we all have the number, not the entire number for our application.

38
00:02:47,040 --> 00:02:48,090
Hopefully, that makes sense.

39
00:02:48,600 --> 00:02:55,080
And first thing that I want to do is navigate your app just so we have successfully already installed

40
00:02:55,200 --> 00:02:56,460
React router, correct?

41
00:02:56,820 --> 00:03:02,460
So we just need to go with import here and now we're looking for, like I said, the browser router

42
00:03:02,850 --> 00:03:03,390
ran.

43
00:03:03,540 --> 00:03:10,980
We want to get the root of the root component and also I want to get the link because even though there's

44
00:03:10,980 --> 00:03:16,860
not going to be the main nav bar for our application, basically it's only going to be in a dashboard.

45
00:03:17,280 --> 00:03:21,270
I still want to showcase how these links work and all that so temporary.

46
00:03:21,510 --> 00:03:28,130
I also get the link component over here and we're looking for a React router dom for.

47
00:03:28,140 --> 00:03:29,310
That's where we're importing.

48
00:03:29,850 --> 00:03:35,010
I'm let's right away set it up, so we still want to wrap our app component.

49
00:03:35,520 --> 00:03:39,030
So in here, we're still going to go with browser router.

50
00:03:39,290 --> 00:03:43,620
Then we'll set up the URLs and the inside of the root.

51
00:03:43,890 --> 00:03:46,290
This is where we want to set up route one by one.

52
00:03:46,470 --> 00:03:49,950
So each route and then the props we're looking for are following.

53
00:03:50,820 --> 00:03:53,770
So in this version, they're looking for path.

54
00:03:54,480 --> 00:03:57,180
So that's going to be the URL path for navigate.

55
00:03:57,180 --> 00:03:57,570
Get over here.

56
00:03:57,600 --> 00:03:58,230
Notice again.

57
00:03:58,230 --> 00:04:05,190
If I log out, this is going to be the URL and then forward slash and then landing correct again.

58
00:04:05,220 --> 00:04:06,720
Domain and then land.

59
00:04:06,720 --> 00:04:12,570
OK, now if I go to register, you can probably already guessed that it's going to be a domain.

60
00:04:12,780 --> 00:04:18,810
And then forward slash register now if I navigate to a page that doesn't exist, for example, or registers,

61
00:04:19,200 --> 00:04:21,779
then will display the Arrow page.

62
00:04:22,230 --> 00:04:25,410
So let's set it up more in the app dress.

63
00:04:25,950 --> 00:04:31,110
I'm going to go with a route and actually in this project dashboard will be my homepage.

64
00:04:31,410 --> 00:04:33,330
Now there's many ways how we can set up.

65
00:04:33,330 --> 00:04:36,060
This is not the only way, but this is the one that I went with.

66
00:04:36,420 --> 00:04:42,120
So essentially, if the user is logged in, he or she right away goes to the dashboard, which is my

67
00:04:42,120 --> 00:04:42,630
homepage.

68
00:04:43,440 --> 00:04:50,580
But if the user is not logged in, then of course we transfer the user to a landing and then he or she

69
00:04:50,580 --> 00:04:53,100
can make their way to a register.

70
00:04:53,160 --> 00:04:55,440
So in here, I'm going to go with the Route one path.

71
00:04:55,890 --> 00:05:00,390
And since my dashboard is going to be home page, I'm going to go with 4GB that signals the homepage

72
00:05:00,720 --> 00:05:02,430
and then we need to provide the element.

73
00:05:02,820 --> 00:05:12,420
Now Element could be pretty much anything, meaning we can provide the HTML right there in the element

74
00:05:12,720 --> 00:05:15,350
or we can get the component.

75
00:05:15,360 --> 00:05:21,360
So I'll show you we have manual approach where basically I'm just going to set up there right here in

76
00:05:21,360 --> 00:05:22,230
the element prop.

77
00:05:22,650 --> 00:05:28,890
And since we only have the landing one, that's the one we'll set up actually as a proper component.

78
00:05:29,280 --> 00:05:30,330
So let's go here.

79
00:05:30,630 --> 00:05:32,820
Let's say that this is going to be a dev.

80
00:05:33,330 --> 00:05:37,290
And then inside of it, let's just type a dash board.

81
00:05:37,690 --> 00:05:39,930
OK, so then I'll close my route.

82
00:05:40,140 --> 00:05:42,870
Eventually, this is going to have a nested structure.

83
00:05:43,410 --> 00:05:48,930
So for timing, I worry about it, but eventually it will place more pages inside of it.

84
00:05:49,380 --> 00:05:55,310
But for now, we'll just leave it the way it is vulnerable copy and paste, and we want to set up four

85
00:05:55,320 --> 00:05:56,010
of them total.

86
00:05:56,550 --> 00:06:02,880
So this is going to be for a home page when we want to have one for register, and let's just change

87
00:06:02,880 --> 00:06:03,300
this around.

88
00:06:03,540 --> 00:06:04,750
Just say here, register.

89
00:06:05,980 --> 00:06:08,130
Register online.

90
00:06:08,830 --> 00:06:11,590
The last one, I think the era when I'll set it up by setting one.

91
00:06:11,920 --> 00:06:18,340
Please keep in mind that again, you can set up whatever GSX you want or hear as long as it follows

92
00:06:18,340 --> 00:06:19,840
the rules of GSX, of course.

93
00:06:20,200 --> 00:06:22,270
And then in here, let's go with landing.

94
00:06:22,480 --> 00:06:23,920
So that's for lining.

95
00:06:24,220 --> 00:06:28,480
And this is the case where we actually provide the component that we created.

96
00:06:28,870 --> 00:06:32,890
And of course, you can already guess that eventually that's going to be the case for all of them.

97
00:06:33,130 --> 00:06:34,990
This is not how we're going to set up our thing.

98
00:06:35,380 --> 00:06:39,940
So let's say you're landing on in this case, actually don't need to even provide anything.

99
00:06:40,390 --> 00:06:43,870
I can just set up my landing and I can actually self-closing as well.

100
00:06:44,770 --> 00:06:46,180
So let me set it up this way.

101
00:06:46,810 --> 00:06:53,970
And on the landing one, of course, I'm not going to use it anymore, and I want to set up one for

102
00:06:53,980 --> 00:06:59,470
the error page and the way we set it up for error page in the reactor out of six is following where

103
00:06:59,470 --> 00:07:02,350
we go with Route Pleshette all the way on the bottom.

104
00:07:02,600 --> 00:07:08,500
And here, since we want to catch all the routes that didn't match the previous ones, we're just going

105
00:07:08,500 --> 00:07:10,390
to use a star and same deal.

106
00:07:10,780 --> 00:07:13,180
We use some kind of element.

107
00:07:13,570 --> 00:07:15,220
Now we'll start with just the day off.

108
00:07:15,220 --> 00:07:19,570
But like I keep saying, eventually there's going to be more pages.

109
00:07:19,870 --> 00:07:25,270
So for now, let's just change this around and let's say adding one, and we're going to be looking

110
00:07:25,270 --> 00:07:26,260
for error.

111
00:07:26,470 --> 00:07:29,650
Now we'll set up that temp knob, our next video.

112
00:07:29,650 --> 00:07:34,870
For now, I'm just going to show you how the navigation is going to look like when we're using the URL

113
00:07:34,870 --> 00:07:35,150
bar.

114
00:07:35,170 --> 00:07:36,430
So let me go to the big screen.

115
00:07:36,430 --> 00:07:38,200
I'm going to go with localhost 3000 now.

116
00:07:38,590 --> 00:07:39,940
This is going to be my dashboard.

117
00:07:40,000 --> 00:07:40,360
Why?

118
00:07:40,390 --> 00:07:42,070
Well, because that's our home page, correct?

119
00:07:42,280 --> 00:07:47,680
Now, if I'm going to go with forward slash and then if I type register what you know, now I see a

120
00:07:47,680 --> 00:07:48,160
register.

121
00:07:48,460 --> 00:07:54,000
Now, if I'm going to go here and if I'm going to type landing, you can probably already guess that

122
00:07:54,010 --> 00:07:55,480
we'll have our proper page.

123
00:07:56,050 --> 00:07:56,380
Awesome.

124
00:07:56,710 --> 00:08:03,820
And then lastly, if I go to Landing's, which is not a page, and at the moment I have empty screen.

125
00:08:04,060 --> 00:08:04,320
Hmm.

126
00:08:04,570 --> 00:08:04,960
Weird.

127
00:08:05,260 --> 00:08:06,130
So let me double check.

128
00:08:06,130 --> 00:08:06,320
Yeah.

129
00:08:06,340 --> 00:08:08,320
Of course I'm missing here, the star.

130
00:08:08,710 --> 00:08:13,630
So let me remove and we need three other stars and I can see what happens if we don't do that.

131
00:08:13,990 --> 00:08:18,100
And here we have properly error and we're pretty much done.

132
00:08:18,430 --> 00:08:23,860
And before we start setting up for the temporary navigation just so you can see how the wind component

133
00:08:23,860 --> 00:08:27,010
works, let me change back the image.

134
00:08:27,460 --> 00:08:32,130
So at the moment, I'm using the alternative one, but I want to go with my main one.

135
00:08:32,140 --> 00:08:34,929
So back in the landing set of alternative.

136
00:08:35,350 --> 00:08:39,600
We're just going to remove and I'm back to my initial image.