1
00:00:00,840 --> 00:00:06,090
In the last section we put together our first route to specify the connection between the current route

2
00:00:06,090 --> 00:00:10,330
that a user is visiting inside the browser and the component to show on the screen.

3
00:00:10,500 --> 00:00:13,680
We're now going to continue by adding in two new routes.

4
00:00:13,680 --> 00:00:17,380
One for our dashboard and one for the survey new components.

5
00:00:17,390 --> 00:00:21,870
Remember over time we're going to replace each of these with the actual components that we want to use

6
00:00:21,870 --> 00:00:23,180
inside of our application.

7
00:00:23,220 --> 00:00:26,190
But for right now we're just doing some initial route setup.

8
00:00:26,280 --> 00:00:29,500
So we kind of get this infrastructure in place for now.

9
00:00:30,190 --> 00:00:36,390
OK so before you just start throwing the routes in there I want to remind you that at present whenever

10
00:00:36,390 --> 00:00:40,640
a user goes to our route route we want to see the landing component on the screen.

11
00:00:40,890 --> 00:00:44,220
And yes we want to see if the header will come back to that very shortly.

12
00:00:44,310 --> 00:00:50,560
Then when we want to see that dashboard component on the screen we should be out the route slash service.

13
00:00:50,820 --> 00:00:57,270
And then finally for Surveys slash new we want to see the survey form or survey new is what we actually

14
00:00:57,270 --> 00:01:02,320
called it let's just call it Survey new because that's what we actually called it inside of our jails

15
00:01:02,400 --> 00:01:03,250
file.

16
00:01:03,760 --> 00:01:04,070
OK.

17
00:01:04,080 --> 00:01:09,020
So let's set up these additional router configuration objects and just kind of see what happens.

18
00:01:09,380 --> 00:01:14,130
So we're going to go back over to my apt G-S file which is where we're going to locate all of our routing

19
00:01:14,130 --> 00:01:20,520
logic and underneath the existing routes I'm going to add on another route definition that's going to

20
00:01:20,520 --> 00:01:22,810
show our dashboard component.

21
00:01:23,010 --> 00:01:28,350
Now really important I want to make sure that you are placing the next route underneath the existing

22
00:01:28,350 --> 00:01:28,840
one.

23
00:01:28,860 --> 00:01:29,630
OK.

24
00:01:30,300 --> 00:01:39,240
So I can place a route where the path slash surveys and remember whenever a user goes to slash surveys

25
00:01:39,330 --> 00:01:43,690
I want to show the component type o components.

26
00:01:43,860 --> 00:01:49,600
I want to show the component dashboard like so OK.

27
00:01:49,660 --> 00:01:52,390
So let's now test this out inside the browser.

28
00:01:52,390 --> 00:01:57,470
When I flip on over I get my automatic refresh.

29
00:01:58,130 --> 00:01:59,280
Any second now.

30
00:01:59,470 --> 00:01:59,830
OK.

31
00:01:59,830 --> 00:02:00,840
There it goes.

32
00:02:01,210 --> 00:02:06,250
And now when it refreshes I'm going to expect to only see the landing component on the screen and it

33
00:02:06,250 --> 00:02:11,910
looks like I do because I'm still at my route route of just essentially forward slash.

34
00:02:11,920 --> 00:02:18,230
That's how we interpret localhost 3000 react rather assumes that is equivalent to just forward slash.

35
00:02:18,310 --> 00:02:22,840
And it looks for a route with a path equal to just forward slash.

36
00:02:22,840 --> 00:02:25,910
So now he want to test out these surveys route.

37
00:02:25,930 --> 00:02:32,510
So slash surveys when we go there we should only see the dashboard component on the screen.

38
00:02:32,770 --> 00:02:41,010
So going to flip back over I'm going to go to localhost 3000 slash dashboard or see me Slash surveys

39
00:02:41,040 --> 00:02:42,240
my mistake.

40
00:02:42,850 --> 00:02:43,610
We'll go there.

41
00:02:43,750 --> 00:02:48,160
And then we're going to expect to see only the words dashboard on the screen.

42
00:02:48,790 --> 00:02:54,610
But when we do however you'll notice that we get both landing and dashboard.

43
00:02:54,670 --> 00:03:00,450
So we are looking at both components here on the screen even though we are out the route slash service.

44
00:03:00,610 --> 00:03:02,400
So this is obviously not desirable.

45
00:03:02,410 --> 00:03:06,390
We do not want this behavior here if we stick with that behavior right there.

46
00:03:06,400 --> 00:03:10,510
That means that whenever a user goes to their dashboard like this thing right here that shows them a

47
00:03:10,510 --> 00:03:12,640
list of all the different services they have.

48
00:03:12,670 --> 00:03:18,090
They will also see some marketing content on here because we're currently also showing them the landing

49
00:03:18,100 --> 00:03:19,010
component.

50
00:03:19,030 --> 00:03:22,850
So obviously something is not quite working the way we expect.

51
00:03:23,050 --> 00:03:28,770
Even though we went to this route slash surveys we're still seeing both sets of components.

52
00:03:28,780 --> 00:03:30,100
So why is this happening.

53
00:03:30,310 --> 00:03:35,290
Well it's pretty straightforward at least from re-act routers consideration or re-act routers perspective

54
00:03:36,160 --> 00:03:40,950
when ever re-act rudder decides what set of components to show on the screen.

55
00:03:41,000 --> 00:03:48,790
It's going to take the current you are l and then try to match every single route and every single path

56
00:03:49,150 --> 00:03:52,380
to the current you are out or the current route.

57
00:03:52,420 --> 00:03:57,380
So let's look at our current route the current route is slash service.

58
00:03:57,630 --> 00:04:03,340
So re-act router is going to take the string slash service so it essentially takes slash surveys and

59
00:04:03,340 --> 00:04:05,020
it's holding it in memory.

60
00:04:05,170 --> 00:04:09,700
It then looks at all the different routes that are defined inside the application.

61
00:04:09,700 --> 00:04:12,010
It says hate route number one.

62
00:04:12,010 --> 00:04:15,400
Does your path contain a string.

63
00:04:15,400 --> 00:04:22,120
Or does your is your path a string that is contained within the route slash service.

64
00:04:22,300 --> 00:04:23,180
That's the rule.

65
00:04:23,290 --> 00:04:28,680
It says Is your path contained in the string slash surveys.

66
00:04:28,780 --> 00:04:36,930
So if we were to say hey is slash contained within slash surveys the answer would be yes unequivocally.

67
00:04:37,030 --> 00:04:39,180
Slash is contained in slash surveys.

68
00:04:39,190 --> 00:04:43,560
It is the first character in that string slash is contained within that string.

69
00:04:43,630 --> 00:04:49,750
And so re-act router assumes that you want to show the landing component reactor order then says hey

70
00:04:49,840 --> 00:04:58,300
second route is your path of slash surveys contained in the string slash surveys and the obvious answer

71
00:04:58,300 --> 00:05:00,810
in that case is yes it is also contained.

72
00:05:01,210 --> 00:05:06,970
So in re-act router decides what set of components to show on the screen it kind of like you could say

73
00:05:06,970 --> 00:05:13,000
greedily matches the path it takes every different path and says Does this exist in the current u r

74
00:05:13,100 --> 00:05:13,920
u r l.

75
00:05:14,080 --> 00:05:19,800
If it does show the component and that's why we are currently seeing both landing and dashboard on the

76
00:05:19,810 --> 00:05:28,080
screen but it's also why when we go back to just localhost 3000 we only see the landing because it looks

77
00:05:28,080 --> 00:05:29,230
almost 3000.

78
00:05:29,230 --> 00:05:36,120
The current route is slash and so slash matches with path number one but not number two.

79
00:05:36,130 --> 00:05:37,310
So how do we fix this.

80
00:05:37,330 --> 00:05:39,400
Obviously not quite desired behavior.

81
00:05:39,400 --> 00:05:47,320
We really want to make sure that this route is only showed on the screen exactly when the path is forward

82
00:05:47,320 --> 00:05:49,830
slash like exactly forward slash.

83
00:05:50,090 --> 00:05:53,300
And so that word exact is kind of the key word here.

84
00:05:53,380 --> 00:05:59,980
That's the that's the trick we're going to pass an additional property to the route component of exact

85
00:06:00,490 --> 00:06:01,930
when we pass an exact.

86
00:06:01,960 --> 00:06:05,560
That basically means hey reactor rudder when you're comparing paths.

87
00:06:05,590 --> 00:06:09,080
Make sure you use exactly this path like the current route.

88
00:06:09,100 --> 00:06:11,050
Must be exactly forward slash.

89
00:06:11,050 --> 00:06:13,490
In order for you to show the landing component.

90
00:06:13,660 --> 00:06:22,180
So essentially we pass an exact of true and that says make sure that the current you are l is exactly

91
00:06:22,180 --> 00:06:22,900
slash.

92
00:06:22,900 --> 00:06:25,210
If you're going to show landing.

93
00:06:25,420 --> 00:06:26,800
So let's test this out.

94
00:06:27,040 --> 00:06:31,830
I'll save the file I'll flip back over to the browser.

95
00:06:32,110 --> 00:06:33,430
There is the refresh.

96
00:06:33,430 --> 00:06:36,610
Now again we only have landing that's to be expected.

97
00:06:36,610 --> 00:06:43,330
But when we go to slash surveys we now only see the dashboard component on the screen which is definitely

98
00:06:43,330 --> 00:06:46,140
what we really truly expect to have happen.

99
00:06:46,710 --> 00:06:47,130
OK.

100
00:06:47,200 --> 00:06:52,160
So that's pretty much it for very basic configuration of routes and the very last thing I want to tell

101
00:06:52,160 --> 00:06:55,530
you about is a little bit of a trick with GSX.

102
00:06:55,670 --> 00:07:01,790
You'll notice that we passed in a prop of true right here which essentially says yes I want you to consider

103
00:07:01,820 --> 00:07:07,530
the path exactly and not just kind of greedily match it now rather than passing in equals.

104
00:07:07,550 --> 00:07:08,890
True like this right here.

105
00:07:08,990 --> 00:07:11,660
We can use a little bit of a trick with GSX.

106
00:07:11,660 --> 00:07:14,940
We're going to remove the equals true part and just leave.

107
00:07:14,960 --> 00:07:16,330
Exactly like so.

108
00:07:16,700 --> 00:07:20,020
So between equals true and just the name.

109
00:07:20,030 --> 00:07:20,540
Exactly.

110
00:07:20,540 --> 00:07:26,360
Here the two are treated equivalently or exactly the same with GSX.

111
00:07:26,390 --> 00:07:33,470
So if you just pass in a property name right here just the word exact GSX will assume you meant to say

112
00:07:33,590 --> 00:07:35,190
exact equals true.

113
00:07:35,630 --> 00:07:41,780
So if we now save this file and then let the browser refresh we'll see that it still works the way we

114
00:07:41,780 --> 00:07:42,430
expect.

115
00:07:42,440 --> 00:07:47,310
We still only see the dash work component when we are on the route slash surveys.

116
00:07:47,670 --> 00:07:49,590
And so I'll do my refresh.

117
00:07:50,030 --> 00:07:57,320
And again we only see dashboard on the screen with a slightly more compact Deus Ex statement here slightly

118
00:07:57,320 --> 00:08:01,800
more syntax friendly of just exact by itself.

119
00:08:02,260 --> 00:08:02,660
OK.

120
00:08:02,720 --> 00:08:04,170
So that's pretty much it.

121
00:08:04,190 --> 00:08:09,440
Now the last thing we have to take care of is these survey new and the header components.

122
00:08:09,440 --> 00:08:13,270
So let's take a quick break and address both of those in the next section.

123
00:08:13,280 --> 00:08:14,690
I'll see you in just a second.