1

00:00:01,260  -->  00:00:07,380
So we've got some content on the screen but really just one view right here just our app component in

2

00:00:07,380  -->  00:00:09,560
this section we're going to add another route.

3

00:00:09,690  -->  00:00:12,710
Discuss it for a little bit and then start picking up the pace from there.

4

00:00:12,710  -->  00:00:20,280
I'm building our application so I'm gonna flip back on my code editor and open up roud Scott JSE again

5

00:00:20,280  -->  00:00:20,370
.

6

00:00:20,370  -->  00:00:26,460
Remember route's is where we Howze all of our mapping between a given path and a component that we want

7

00:00:26,460  -->  00:00:27,680
to share show.

8

00:00:28,140  -->  00:00:32,790
So the purpose of re-act router you know just kind of learning a little bit more about this.

9

00:00:32,940  -->  00:00:36,100
We're going to make a little test component in here.

10

00:00:36,140  -->  00:00:39,480
You know normally we don't define any components side of our route's file but we're going to break that

11

00:00:39,480  -->  00:00:43,590
rule just this one time just to have another component that we can show on the screen.

12

00:00:43,950  -->  00:00:49,710
So I kind to define a functional component here will say Konst greeting.

13

00:00:51,010  -->  00:00:53,870
Whoops.

14

00:00:55,530  -->  00:01:00,020
And inside of here we'll just say it's going to return a do.

15

00:01:01,320  -->  00:01:04,290
And it says hey there that's all.

16

00:01:04,290  -->  00:01:09,150
So just a simple component just something that we can use to test out a couple of different routes in

17

00:01:09,150  -->  00:01:10,690
here.

18

00:01:11,810  -->  00:01:12,270
OK.

19

00:01:12,270  -->  00:01:17,620
So I'm going to add a nested route in here and we'll talk about what that is in just a second.

20

00:01:17,640  -->  00:01:18,960
Let's add it first.

21

00:01:19,230  -->  00:01:22,570
So I'm not going to make the route a self-closing tag anymore.

22

00:01:22,740  -->  00:01:28,460
I'm going to close it like so and I'm going to add another route in here.

23

00:01:28,620  -->  00:01:33,020
So it's looking you know just like normal GSX GSX So you're already right.

24

00:01:33,330  -->  00:01:42,630
So I need to find another route with a path of greets and whenever a user visits this path they should

25

00:01:42,630  -->  00:01:49,650
see the components greeting and then we'll do a self-closing tag like so do double check to make sure

26

00:01:49,650  -->  00:01:53,120
that you remove the self-closing tag on the first round up here.

27

00:01:53,790  -->  00:01:58,020
OK so we've got one router right here I'm going to add two more.

28

00:01:58,080  -->  00:02:00,840
And they're all going to show the same component they're all going to show Greetings.

29

00:02:00,840  -->  00:02:07,290
I'm going to copy paste this line right here and just paste it twice in we'll say the second one right

30

00:02:07,290  -->  00:02:09,240
here will match it to the path.

31

00:02:09,240  -->  00:02:10,420
Greek too.

32

00:02:10,740  -->  00:02:13,700
And then it's one will be Greek 3.

33

00:02:13,740  -->  00:02:17,200
So this really forms a nesting tree of sorts right here.

34

00:02:17,220  -->  00:02:19,750
Oliver Raut components are fully testable.

35

00:02:19,950  -->  00:02:26,640
And when you nest them it kind of stacks the path up here so we can read really four separate routes

36

00:02:26,640  -->  00:02:35,310
here are separate routes would be just forward slash the case in which someone visits forward slash

37

00:02:35,340  -->  00:02:42,270
and we would expect to see the component operate for the next one that would be valid would be forward

38

00:02:42,270  -->  00:02:52,790
slash greet then forward slash greet to and forward slash greet three.

39

00:02:52,800  -->  00:03:00,750
These are all now valid routes inside of our application and in each case we would have a mapping between

40

00:03:00,810  -->  00:03:04,380
the routes and the component that was being shown.

41

00:03:04,380  -->  00:03:06,970
So this one right here would show up

42

00:03:10,530  -->  00:03:13,120
here we would see AB and greeting.

43

00:03:13,500  -->  00:03:16,000
And here we would see greeting.

44

00:03:16,290  -->  00:03:20,750
And as you might guess at greeting.

45

00:03:21,620  -->  00:03:22,000
OK.

46

00:03:22,110  -->  00:03:23,700
I'm going to take off this map right here.

47

00:03:23,700  -->  00:03:26,370
This is just some notes for us.

48

00:03:27,440  -->  00:03:27,740
OK.

49

00:03:27,750  -->  00:03:31,080
So we've now defined four different routes inside of our application.

50

00:03:31,080  -->  00:03:35,440
Let's go ahead and give this a shot in the browser so I can open the browser up.

51

00:03:35,580  -->  00:03:39,990
I'm going to refresh and I still see re-act simple starter.

52

00:03:40,090  -->  00:03:43,900
I'm going to change the URL appear to go to slash greeds.

53

00:03:44,200  -->  00:03:46,380
And so what are you what do you think we're going to see here.

54

00:03:46,380  -->  00:03:52,020
We kind of expect to see the greeting component we expect to see the text Hey there show up on the screen

55

00:03:52,020  -->  00:03:52,550
.

56

00:03:52,680  -->  00:03:58,410
So let's go there and I don't have an error so it looks like you know react rather successfully loaded

57

00:03:58,410  -->  00:04:03,910
this route up I can go to slash greed by still only see that text re-act simple starter.

58

00:04:04,080  -->  00:04:06,280
So looks like we're missing something here.

59

00:04:06,960  -->  00:04:12,840
Well here's the trick re-act router knows that you want to show both app and greeting but it doesn't

60

00:04:12,840  -->  00:04:16,320
really know where to place the greeting component.

61

00:04:16,320  -->  00:04:17,050
Think about it.

62

00:04:17,190  -->  00:04:26,820
Greeting is nested inside of app that component greeting is nested inside of app app needs to render

63

00:04:26,830  -->  00:04:32,120
greeting greeting an app aren't siblings their parent and child.

64

00:04:32,190  -->  00:04:38,610
So to make sure that app actually renders these child components here we have to add an additional line

65

00:04:38,670  -->  00:04:41,460
to abduct us.

66

00:04:42,630  -->  00:04:48,840
So to make sure that app is actually going to render the greeting we'll open up app dot Js and we're

67

00:04:48,840  -->  00:04:56,100
going to add one line here so I'm going to break our div into a multi line like so and then we're going

68

00:04:56,100  -->  00:05:00,250
to add some GSX that references the javascript variable.

69

00:05:00,270  -->  00:05:05,560
So we'll have our curly braces and we'll say this dot props children.

70

00:05:06,590  -->  00:05:07,190
OK.

71

00:05:07,320  -->  00:05:08,860
So what's going on here.

72

00:05:08,880  -->  00:05:10,050
This is kind of a weird statement.

73

00:05:10,050  -->  00:05:12,200
You know what children are we talking about.

74

00:05:12,570  -->  00:05:19,860
Well whenever we define a nested Raut like this you know we've got one route inside of another route

75

00:05:19,870  -->  00:05:20,160
.

76

00:05:20,550  -->  00:05:29,240
If we visit this nested route so see like Slash greet this child component is passed to app as this

77

00:05:29,240  -->  00:05:31,100
stop prop's start children.

78

00:05:31,560  -->  00:05:37,260
So to get this child component to show up inside of our view you know inside of our browser we need

79

00:05:37,260  -->  00:05:42,100
to make sure that app renders this props Propst children.

80

00:05:42,940  -->  00:05:47,070
OK let's go ahead and give this a shot in the browser just so we get a better sense of you know what's

81

00:05:47,070  -->  00:05:47,820
going on there.

82

00:05:47,820  -->  00:05:50,820
I mean you go ahead and refresh the page and you can see.

83

00:05:50,820  -->  00:05:55,130
Now we have Riak simple starter and hey there exactly what we expected.

84

00:05:55,140  -->  00:05:57,000
Just we want.

85

00:05:57,000  -->  00:05:59,090
Let's go ahead and do a little test here.

86

00:05:59,190  -->  00:06:01,060
Back in after us.

87

00:06:01,170  -->  00:06:03,610
I'm going to just swap the two lines right here.

88

00:06:03,630  -->  00:06:07,980
So now it's this dot product that children and then react simple starter.

89

00:06:08,580  -->  00:06:10,540
So I'm going to refresh the page and you'll see.

90

00:06:10,540  -->  00:06:12,660
Now they flipped places.

91

00:06:13,470  -->  00:06:18,640
So that's why we have to specifically define where this dot props start children goes.

92

00:06:18,660  -->  00:06:23,790
Re-act router doesn't want to make an assumption here that oh you know they want to render child component

93

00:06:23,820  -->  00:06:28,920
therefore they should just be rendered as like a list on the screen because we might not want it to

94

00:06:28,920  -->  00:06:29,700
be a list.

95

00:06:29,700  -->  00:06:35,130
You know we might want to have some have the child component nested in-between a whole bunch of different

96

00:06:35,130  -->  00:06:36,390
Conne content in here.

97

00:06:36,390  -->  00:06:45,460
You know we might want to have a header of sorts and we might want to have a footer beneath it.

98

00:06:45,720  -->  00:06:51,360
That's why we have to work with this Propst our children as opposed to just saying oh well I'm re-act

99

00:06:51,360  -->  00:06:52,190
router.

100

00:06:52,350  -->  00:06:54,540
They want to show a couple of different components on the screen.

101

00:06:54,540  -->  00:06:57,550
I'm just going to kind of show them they're on the list.

102

00:06:58,410  -->  00:06:58,800
OK.

103

00:06:58,800  -->  00:07:07,590
So let's clean up after G-S here and only render this doc Propst children in here let's refresh and

104

00:07:07,590  -->  00:07:08,380
we only see.

105

00:07:08,400  -->  00:07:09,460
Hey there.

106

00:07:09,860  -->  00:07:10,150
Yes.

107

00:07:10,170  -->  00:07:11,970
This has I did satisfy side effects.

108

00:07:11,970  -->  00:07:18,240
Now if we go back to the home route this dot props start children isn't defined because we don't have

109

00:07:18,240  -->  00:07:19,010
any children.

110

00:07:19,080  -->  00:07:22,360
And so we don't see anything on the screen at all.

111

00:07:23,550  -->  00:07:25,260
OK so one more time.

112

00:07:25,290  -->  00:07:33,930
The overall takeaway here is that re-act router defines mappings between a given your L path and components

113

00:07:33,930  -->  00:07:34,560
.

114

00:07:34,800  -->  00:07:40,770
We can nest routes within side other routes to define more complex you are Ell's.

115

00:07:41,180  -->  00:07:51,090
Finally whenever we expect a parent route to render a child route like right here the parent needs to

116

00:07:51,090  -->  00:07:57,090
reference this prob stop children in the rendered method as that is where the child component will be

117

00:07:57,090  -->  00:07:58,760
rendered.

118

00:07:58,770  -->  00:08:01,630
All right let's go ahead and continue in the next section