1
00:00:00,860 --> 00:00:05,340
A lot of suction we handle a little bit more of that configuration inside of our application.

2
00:00:05,670 --> 00:00:12,030
We added on the slash surveys component we figured out the difference between adding a route with exact

3
00:00:12,150 --> 00:00:14,470
as a prop and leaving off exact.

4
00:00:14,470 --> 00:00:21,090
So remember in general you usually probably want to have exact but you might have an application where

5
00:00:21,090 --> 00:00:22,660
you do want to greedily match.

6
00:00:22,680 --> 00:00:28,240
And so it's really left as an option up to you to decide whether or not the route should use the exact

7
00:00:28,260 --> 00:00:30,100
proper here.

8
00:00:30,120 --> 00:00:34,940
Now the next thing we're going to take care of is making sure that we can see both the serving new and

9
00:00:34,940 --> 00:00:37,920
the header components on the screen as well.

10
00:00:37,930 --> 00:00:39,940
We'll first take care of serving them.

11
00:00:40,140 --> 00:00:42,980
Remember that we only want to see this component on the screen.

12
00:00:43,190 --> 00:00:52,530
When ever the user visits the route of slash surveys slash new so I'll flip back on over and we're going

13
00:00:52,530 --> 00:01:01,470
to add on an additional route underneath the existing one with a path of slash surveys slash in it.

14
00:01:01,950 --> 00:01:07,100
And then whenever you as a user goes there I want to show the component survey now.

15
00:01:07,550 --> 00:01:10,970
So survey new like so.

16
00:01:11,940 --> 00:01:12,230
OK.

17
00:01:12,240 --> 00:01:16,420
So I want you to now consider I want you to ask yourself the question.

18
00:01:16,530 --> 00:01:23,370
Does the dashboard component here or does the survey a new component here need to also have a prop of

19
00:01:23,370 --> 00:01:27,870
exact won't you just kind of think about that for a second and while you do.

20
00:01:27,900 --> 00:01:32,740
We're going to test out this new route of slash surveys slash new.

21
00:01:33,060 --> 00:01:38,880
So go back over to the browser or go back to our running application and I'm now going to manually navigate

22
00:01:38,880 --> 00:01:45,280
over to slash surveys slash new like so and when I do so.

23
00:01:45,330 --> 00:01:51,700
Yup sure enough we see both the dashboard and the survey new components which are definitely not where

24
00:01:51,700 --> 00:01:57,420
we expect to have happen when I got a slash survey slash new I only want to see survey new I don't want

25
00:01:57,420 --> 00:01:58,550
to see the dashboard.

26
00:01:58,860 --> 00:02:05,770
And so as you might guess this is another case of greedily matching the route by re-act router so reactor

27
00:02:05,770 --> 00:02:12,490
routers says OK the route is slash surveys slash new it looks at the first route.

28
00:02:12,490 --> 00:02:19,770
It says OK I need to exactly maps the route is forward slash exactly equal to slash service slash new.

29
00:02:19,880 --> 00:02:20,820
It says no.

30
00:02:21,090 --> 00:02:27,250
It then goes to the next one and says is the string slash surveys contained within surveys slash new

31
00:02:27,480 --> 00:02:28,460
it says yes.

32
00:02:28,570 --> 00:02:31,330
And so it decides to show the dashboard component.

33
00:02:31,330 --> 00:02:32,600
So long story short.

34
00:02:32,680 --> 00:02:37,360
Yes we do also have to add on exact to this route as well.

35
00:02:37,960 --> 00:02:42,310
So add on exact and now it should behave more in the way we expect.

36
00:02:44,150 --> 00:02:47,960
Now at this point we really just have these three components right here.

37
00:02:48,020 --> 00:02:52,840
I don't really need to add on the exact property name to this route.

38
00:02:52,880 --> 00:02:53,710
I certainly could.

39
00:02:53,750 --> 00:02:54,780
It won't harm anything.

40
00:02:54,800 --> 00:02:55,710
There's no harm in it.

41
00:02:55,730 --> 00:02:57,370
I certainly could add that on.

42
00:02:57,530 --> 00:03:03,260
But I don't strictly need to because there's no other route or no other path inside of application that

43
00:03:03,260 --> 00:03:08,050
a user might go to that has the string survey slash knew in it.

44
00:03:08,060 --> 00:03:14,130
So I really don't have to add on exact here but there would certainly be no harm if I did.

45
00:03:14,300 --> 00:03:18,710
So now when we flip back over to the browser it looks like the refresh already kicked in.

46
00:03:18,780 --> 00:03:24,430
I met slash surveys slash new and I only see the survey new component on the screen.

47
00:03:24,520 --> 00:03:24,940
OK.

48
00:03:25,010 --> 00:03:27,200
So this is working out pretty well.

49
00:03:27,620 --> 00:03:32,630
I think that the very last thing that we're going to take care of is to make sure that we can always

50
00:03:32,720 --> 00:03:33,860
no matter what.

51
00:03:34,040 --> 00:03:36,700
Always see the header component on the screen.

52
00:03:36,770 --> 00:03:39,550
That's the last thing that we need to take care of.

53
00:03:39,560 --> 00:03:41,860
So here's the great thing about re-act router.

54
00:03:42,230 --> 00:03:49,280
It treats these routes like special children or special objects that it needs to evaluate and say hey

55
00:03:49,280 --> 00:03:51,410
do I need to show this thing on the screen.

56
00:03:51,410 --> 00:03:57,710
But other than that they are treated as normal re-act components normal Riak components and what I really

57
00:03:57,710 --> 00:04:02,290
mean by that is we can treat them like any other component inside of our project.

58
00:04:02,450 --> 00:04:10,380
We can put normal components like normal text above in-between after like normal text.

59
00:04:10,430 --> 00:04:14,300
Other components buttons anchor tags whatever else we want.

60
00:04:14,360 --> 00:04:18,080
Or it can be freely nested among all these different routes.

61
00:04:18,260 --> 00:04:24,260
And so long story short in order to get our head or to also appear on the screen and make sure that

62
00:04:24,260 --> 00:04:29,490
it is visible at all times we can just pass it or assign it at the very top.

63
00:04:29,510 --> 00:04:36,050
Above all these other routes and so that means that the header will always be displayed no matter what

64
00:04:36,320 --> 00:04:39,930
because notice that it's not tied to any specific configuration.

65
00:04:40,250 --> 00:04:46,430
And reactor writer will always make sure that the header is visible and then it will place any other

66
00:04:46,520 --> 00:04:49,220
respective or relevant route on the screen.

67
00:04:49,820 --> 00:04:50,970
So that's pretty much it.

68
00:04:50,960 --> 00:04:55,130
And that's how we take care of showing a component at all times with re-act router.

69
00:04:55,130 --> 00:04:58,260
We just treat it like any other component.

70
00:04:58,310 --> 00:05:05,030
So now if I save the application and flip back over we're going to see the header appear at the very

71
00:05:05,030 --> 00:05:07,350
top when we're at survey new.

72
00:05:07,640 --> 00:05:14,000
If we go to just slash surveys we'll still see the header on the dashboard and if we go to just slash

73
00:05:14,570 --> 00:05:18,560
we'll see both the header and the landing screen as well.

74
00:05:18,560 --> 00:05:23,960
Now of course we also want to make sure that the content inside the header gets customize based on whether

75
00:05:23,960 --> 00:05:25,330
or not the user is logged in.

76
00:05:25,430 --> 00:05:28,730
But that is a completely separate consideration.

77
00:05:28,730 --> 00:05:35,800
The content in the header is determined by a certain piece of data inside of or react and redux really

78
00:05:35,800 --> 00:05:41,150
are redux store the content that should be visible on the screen at all is visible depending on the

79
00:05:41,150 --> 00:05:41,770
route.

80
00:05:41,780 --> 00:05:46,580
And that means that it falls underneath the responsibility of re-act router.

81
00:05:46,670 --> 00:05:52,580
So now that we've got re-act router at least initially setup and initially put together let's continue

82
00:05:52,580 --> 00:05:57,860
in the next section where we're going to start to break the head or component out to a separate component

83
00:05:58,190 --> 00:06:03,620
and we'll also make sure that we have some ability of deciding whether or not the user is truly logged

84
00:06:03,620 --> 00:06:06,140
in when they first visit our application.

85
00:06:06,410 --> 00:06:10,190
So let's continue in the next section and continue on.