So we've got some content on the screen but really just one view right here just our app component in 2
this section we're going to add another route. 3
Discuss it for a little bit and then start picking up the pace from there. 4
I'm building our application so I'm gonna flip back on my code editor and open up roud Scott JSE again 5
. 6
Remember route's is where we Howze all of our mapping between a given path and a component that we want 7
to share show. 8
So the purpose of re-act router you know just kind of learning a little bit more about this. 9
We're going to make a little test component in here. 10
You know normally we don't define any components side of our route's file but we're going to break that 11
rule just this one time just to have another component that we can show on the screen. 12
So I kind to define a functional component here will say Konst greeting. 13
Whoops. 14
And inside of here we'll just say it's going to return a do. 15
And it says hey there that's all. 16
So just a simple component just something that we can use to test out a couple of different routes in 17
here. 18
OK. 19
So I'm going to add a nested route in here and we'll talk about what that is in just a second. 20
Let's add it first. 21
So I'm not going to make the route a self-closing tag anymore. 22
I'm going to close it like so and I'm going to add another route in here. 23
So it's looking you know just like normal GSX GSX So you're already right. 24
So I need to find another route with a path of greets and whenever a user visits this path they should 25
see the components greeting and then we'll do a self-closing tag like so do double check to make sure 26
that you remove the self-closing tag on the first round up here. 27
OK so we've got one router right here I'm going to add two more. 28
And they're all going to show the same component they're all going to show Greetings. 29
I'm going to copy paste this line right here and just paste it twice in we'll say the second one right 30
here will match it to the path. 31
Greek too. 32
And then it's one will be Greek 3. 33
So this really forms a nesting tree of sorts right here. 34
Oliver Raut components are fully testable. 35
And when you nest them it kind of stacks the path up here so we can read really four separate routes 36
here are separate routes would be just forward slash the case in which someone visits forward slash 37
and we would expect to see the component operate for the next one that would be valid would be forward 38
slash greet then forward slash greet to and forward slash greet three. 39
These are all now valid routes inside of our application and in each case we would have a mapping between 40
the routes and the component that was being shown. 41
So this one right here would show up 42
here we would see AB and greeting. 43
And here we would see greeting. 44
And as you might guess at greeting. 45
OK. 46
I'm going to take off this map right here. 47
This is just some notes for us. 48
OK. 49
So we've now defined four different routes inside of our application. 50
Let's go ahead and give this a shot in the browser so I can open the browser up. 51
I'm going to refresh and I still see re-act simple starter. 52
I'm going to change the URL appear to go to slash greeds. 53
And so what are you what do you think we're going to see here. 54
We kind of expect to see the greeting component we expect to see the text Hey there show up on the screen 55
. 56
So let's go there and I don't have an error so it looks like you know react rather successfully loaded 57
this route up I can go to slash greed by still only see that text re-act simple starter. 58
So looks like we're missing something here. 59
Well here's the trick re-act router knows that you want to show both app and greeting but it doesn't 60
really know where to place the greeting component. 61
Think about it. 62
Greeting is nested inside of app that component greeting is nested inside of app app needs to render 63
greeting greeting an app aren't siblings their parent and child. 64
So to make sure that app actually renders these child components here we have to add an additional line 65
to abduct us. 66
So to make sure that app is actually going to render the greeting we'll open up app dot Js and we're 67
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
to add some GSX that references the javascript variable. 69
So we'll have our curly braces and we'll say this dot props children. 70
OK. 71
So what's going on here. 72
This is kind of a weird statement. 73
You know what children are we talking about. 74
Well whenever we define a nested Raut like this you know we've got one route inside of another route 75
. 76
If we visit this nested route so see like Slash greet this child component is passed to app as this 77
stop prop's start children. 78
So to get this child component to show up inside of our view you know inside of our browser we need 79
to make sure that app renders this props Propst children. 80
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
going on there. 82
I mean you go ahead and refresh the page and you can see. 83
Now we have Riak simple starter and hey there exactly what we expected. 84
Just we want. 85
Let's go ahead and do a little test here. 86
Back in after us. 87
I'm going to just swap the two lines right here. 88
So now it's this dot product that children and then react simple starter. 89
So I'm going to refresh the page and you'll see. 90
Now they flipped places. 91
So that's why we have to specifically define where this dot props start children goes. 92
Re-act router doesn't want to make an assumption here that oh you know they want to render child component 93
therefore they should just be rendered as like a list on the screen because we might not want it to 94
be a list. 95
You know we might want to have some have the child component nested in-between a whole bunch of different 96
Conne content in here. 97
You know we might want to have a header of sorts and we might want to have a footer beneath it. 98
That's why we have to work with this Propst our children as opposed to just saying oh well I'm re-act 99
router. 100
They want to show a couple of different components on the screen. 101
I'm just going to kind of show them they're on the list. 102
OK. 103
So let's clean up after G-S here and only render this doc Propst children in here let's refresh and 104
we only see. 105
Hey there. 106
Yes. 107
This has I did satisfy side effects. 108
Now if we go back to the home route this dot props start children isn't defined because we don't have 109
any children. 110
And so we don't see anything on the screen at all. 111
OK so one more time. 112
The overall takeaway here is that re-act router defines mappings between a given your L path and components 113
. 114
We can nest routes within side other routes to define more complex you are Ell's. 115
Finally whenever we expect a parent route to render a child route like right here the parent needs to 116
reference this prob stop children in the rendered method as that is where the child component will be 117
rendered. 118
All right let's go ahead and continue in the next section