Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,590 --> 00:00:08,370
OK, now, before we continue, I think it's really important to cover a couple fundamental concepts
2
00:00:08,370 --> 00:00:16,700
in react router dom and to do so I've built this very quick little application to demonstrate all it
3
00:00:16,700 --> 00:00:19,250
is, is it has three pages.
4
00:00:19,880 --> 00:00:21,080
It has a home page.
5
00:00:21,920 --> 00:00:23,930
It has a topics page.
6
00:00:25,130 --> 00:00:29,810
And it has a topic I'd page, right, a topic detailed.
7
00:00:31,010 --> 00:00:34,430
So three pages now, if we were to look at the code for this.
8
00:00:35,590 --> 00:00:41,500
We would see that it's just three functional components that render Divs with the one telling us where
9
00:00:41,500 --> 00:00:49,160
we're at and then it's all nested in roots inside of our app component.
10
00:00:49,180 --> 00:00:49,530
Right.
11
00:00:50,910 --> 00:00:59,790
Our home root is the base path with the component homepage, our topics, route slash topics and then
12
00:00:59,790 --> 00:01:05,690
our topics detail is topics slash colon topic ID.
13
00:01:06,450 --> 00:01:12,740
Now I know that this Colen topic ID is kind of new, but we're going to cover that a little later.
14
00:01:13,440 --> 00:01:17,370
The first thing that I want us to look at is our home page.
15
00:01:18,360 --> 00:01:25,890
The reason why is because one of the things that reactor dome does for us is that any component that
16
00:01:25,890 --> 00:01:28,410
gets rendered by our route.
17
00:01:29,350 --> 00:01:35,740
Gets past three arguments, the component that gets rendered is going to be the component we pass into
18
00:01:35,740 --> 00:01:38,350
our component property on our route.
19
00:01:39,250 --> 00:01:42,810
But what do those three properties look like?
20
00:01:43,840 --> 00:01:45,610
Well, let's lock them out and see.
21
00:01:50,100 --> 00:01:51,660
Let's navigate through our homepage.
22
00:01:52,770 --> 00:02:00,300
And let's open up our dev tools, we'll see that the three props that we got past were a history prop,
23
00:02:00,300 --> 00:02:02,410
a location and a match.
24
00:02:03,240 --> 00:02:05,760
Now, the one I want to look at first is the match.
25
00:02:07,030 --> 00:02:10,300
So there's four things we get inside of our match.
26
00:02:10,960 --> 00:02:12,520
The first is the URL.
27
00:02:13,480 --> 00:02:19,360
The euro is just the you are all of our component.
28
00:02:20,290 --> 00:02:23,650
That it got rendered up, too, from the root.
29
00:02:24,610 --> 00:02:26,170
Now, what do I mean by this?
30
00:02:27,510 --> 00:02:35,280
So if we were to look at our route for homepage, right, we learned that in our last lesson without
31
00:02:35,280 --> 00:02:38,550
this exact keyword, any of our.
32
00:02:39,520 --> 00:02:45,850
Paths that start with a slash and then anything after is also going to render our home page, because
33
00:02:45,850 --> 00:02:50,140
technically, if we were to navigate two topics now.
34
00:02:51,300 --> 00:02:59,310
We are still matching the forward portion of our you are Al, right, which means that this route pattern
35
00:02:59,460 --> 00:03:02,580
is matching for our homepage.
36
00:03:04,270 --> 00:03:10,600
But if we were to look at our match, we actually see that the URL only matches up till the slash,
37
00:03:10,630 --> 00:03:17,830
not the topics, so that you orl, no matter what we type, even if we were to navigate all the way
38
00:03:17,830 --> 00:03:26,620
here and the you are all property on our match will always only display the you are up until where it
39
00:03:26,620 --> 00:03:27,730
actually matched.
40
00:03:30,860 --> 00:03:36,360
The path property is just the pattern that the route is looking to match.
41
00:03:37,010 --> 00:03:43,730
So the path property for our home page would be just the slash the path property for our topics list
42
00:03:43,730 --> 00:03:45,250
would just be slash topics.
43
00:03:45,470 --> 00:03:51,380
And then for topic detail will be topics and topic ID, which is what we see here.
44
00:03:52,730 --> 00:03:58,010
If we were to log this in each of these components, we will see.
45
00:03:58,910 --> 00:04:05,540
That that is exactly what will show, so if we were to navigate to topics.
46
00:04:06,780 --> 00:04:14,730
We'll see in our topics that the path is just the topics, which is the pattern that it's matching in
47
00:04:14,730 --> 00:04:14,820
the.
48
00:04:17,260 --> 00:04:24,640
The is exact property is the one that's matching that is only true.
49
00:04:25,670 --> 00:04:35,560
If the entire URL matches the pattern, so while it's true for is first topics, because we're large
50
00:04:35,570 --> 00:04:40,550
topics, it is false for our homepage that despite it being rendered.
51
00:04:41,940 --> 00:04:48,450
It's not a perfect match because there's more of the Earl than what is being matched by the route.
52
00:04:50,190 --> 00:04:57,240
Finally, the program's property is an object of you all parameters.
53
00:04:57,750 --> 00:04:59,220
Now, what's a URL parameter?
54
00:05:00,000 --> 00:05:04,100
This is a U all parameter or a root parameter.
55
00:05:04,800 --> 00:05:12,630
When we write this in our path, we're saying that this route is waiting to match anything up to topics
56
00:05:12,630 --> 00:05:17,700
and then slash anything in this spot after.
57
00:05:18,830 --> 00:05:26,930
It can be a dynamically changing value, right, but that topic ID value we want to be able to access
58
00:05:26,960 --> 00:05:28,100
as a parameter.
59
00:05:28,820 --> 00:05:32,540
Now, why is this important if we were to navigate?
60
00:05:32,550 --> 00:05:34,600
So let's make our home page exact, right.
61
00:05:34,850 --> 00:05:43,100
If we were to navigate, to slash topics, slash 13, we actually now have access to that in our program.
62
00:05:43,220 --> 00:05:44,930
But let's log at first.
63
00:05:51,920 --> 00:05:54,180
We'll see that in our match.
64
00:05:54,920 --> 00:05:58,190
We now have access to this topic, ID 13.
65
00:06:00,430 --> 00:06:08,410
This is really useful because let's say in our topics detail, we wanted to show which topic we're looking
66
00:06:08,410 --> 00:06:16,150
at while we would be able to access it by going topics not matched up Hiram's topic ID.
67
00:06:19,060 --> 00:06:26,130
And if we wanted to use this idea to fetch a set of data related to this specific topic, right.
68
00:06:26,230 --> 00:06:31,900
It's good that in our topic detail page, we have access to that specific ID.
69
00:06:33,880 --> 00:06:42,550
So these parameters and doing it with this style allows our topic detail to populate itself if we needed
70
00:06:42,550 --> 00:06:48,970
it to, from some kind of backend database based off of what specific detail it's at.
71
00:06:49,870 --> 00:06:52,690
And our topic detail now is aware of it.
72
00:06:52,870 --> 00:06:56,260
And usually we store this based on the Yooralla parameter.
73
00:06:56,380 --> 00:06:56,790
Right.
74
00:06:56,830 --> 00:07:03,160
Like if we were to if you look at many Web applications, you'll see that if you are looking at one
75
00:07:03,160 --> 00:07:09,280
of your friends, for example, on Facebook, it'll say Facebook dot com profiles, and then they're
76
00:07:09,550 --> 00:07:12,300
either email or some unique identifier.
77
00:07:12,970 --> 00:07:18,940
So that is why this program pattern is so valuable.
78
00:07:20,280 --> 00:07:23,970
Now, the next thing is the history.
79
00:07:25,100 --> 00:07:32,120
Now, the history one is quite complicated, but the main thing I want to focus on is the push.
80
00:07:32,870 --> 00:07:35,300
So there's two ways to navigate.
81
00:07:36,240 --> 00:07:43,800
In React router, Tom, between our pages right now, we've just been dynamically updating the URL and
82
00:07:43,800 --> 00:07:50,280
getting to different pages, but in reality, the first one is the use of this link component.
83
00:07:51,180 --> 00:07:58,800
And the link component is a special component that recruiter Rotterdam gives us that lets us dynamically
84
00:07:58,800 --> 00:08:05,940
pass in this property of two and then the string of where we want this link to take us to.
85
00:08:08,190 --> 00:08:10,110
And now if I go to home.
86
00:08:11,960 --> 00:08:18,590
I have this what looks like a modified ayling that will take me to this, like the only difference between
87
00:08:18,590 --> 00:08:20,840
this and are actual.
88
00:08:22,270 --> 00:08:30,130
Topics is that react, you've got to remember, is a single page application, which means that it's
89
00:08:30,130 --> 00:08:38,110
not actually read directing you and rebuilding the entire application every time the URL changes.
90
00:08:38,800 --> 00:08:46,720
We're really just hijacking the your L's position to determine with JavaScript what part of the DOM
91
00:08:46,720 --> 00:08:50,320
to take off and then what part of the DOM to replace write.
92
00:08:50,320 --> 00:08:53,130
What component do we want to remount or mount?
93
00:08:53,560 --> 00:09:00,370
We're not trying to re render the entire application, which was typically the case before we were building
94
00:09:00,370 --> 00:09:05,880
react applications because REACT is an SPEEA, a single page application.
95
00:09:06,580 --> 00:09:13,630
So because of this and a link would actually force you to redirect and re render the entire application,
96
00:09:14,110 --> 00:09:22,300
whereas using the react route or dom link, we're just borrowing the URL to, to tell our application
97
00:09:22,870 --> 00:09:23,950
what to re render.
98
00:09:25,250 --> 00:09:30,790
Now, the other way to do this type of navigation is using the history PRA.
99
00:09:31,960 --> 00:09:39,550
So if instead of a link, we wanted to use a button and in the end click of our button, we would pass
100
00:09:39,550 --> 00:09:40,600
it a function.
101
00:09:42,070 --> 00:09:47,500
That gets called when ever gets clicked, and in this function, we will call the history Propp, right.
102
00:09:47,560 --> 00:09:52,280
And we will tell it to push and then the string where we want to go.
103
00:09:52,990 --> 00:09:58,870
So this is equivalent to using a link, but it gives us more dynamic access.
104
00:09:58,930 --> 00:09:59,290
Right.
105
00:09:59,320 --> 00:10:04,490
We can dynamically functionally control when we want this to work.
106
00:10:04,510 --> 00:10:08,200
So if, for example, we wanted to do this in a component did mount instead.
107
00:10:08,680 --> 00:10:09,070
Right.
108
00:10:09,250 --> 00:10:14,290
We couldn't render a link in our component did mount because it's just a functional call.
109
00:10:14,290 --> 00:10:14,480
Right.
110
00:10:14,500 --> 00:10:19,120
It's a method we would use history, dot push and we'll see that here.
111
00:10:20,540 --> 00:10:24,140
Right, we have this topics button, we can just click it and go.
112
00:10:25,940 --> 00:10:29,390
So that's the main use that we get out of the history.
113
00:10:30,710 --> 00:10:33,710
The third prop that we have is the location.
114
00:10:34,710 --> 00:10:38,220
The location prop actually tells us.
115
00:10:39,430 --> 00:10:45,940
Where we are currently like, what is our application, the main thing I want us to focus on is the
116
00:10:45,940 --> 00:10:49,090
path name, ignore these other properties.
117
00:10:50,300 --> 00:10:51,710
Let's just look at the pathing.
118
00:10:52,730 --> 00:10:57,070
If we were to navigate, let's say let's not make our home page exact again.
119
00:10:58,930 --> 00:11:03,760
If we were to navigate to like all these random.
120
00:11:05,260 --> 00:11:06,060
Savi, URL's.
121
00:11:07,390 --> 00:11:14,320
Even though our homepage still matches our location, gives us the full path name of where we are currently.
122
00:11:16,050 --> 00:11:24,390
So this is useful because our application, our components in some way can become aware of what the
123
00:11:24,390 --> 00:11:25,800
full URL looks like.
124
00:11:29,300 --> 00:11:35,870
Why would we use these properties while the history one with the pusch we understand?
125
00:11:37,040 --> 00:11:43,370
Location, we can see why we might need the path name at some point, but the main usage of match beyond
126
00:11:43,370 --> 00:11:46,460
being inside of a specific topic detail.
127
00:11:47,740 --> 00:11:49,990
Another useful thing about it.
128
00:11:51,210 --> 00:11:57,360
Is that this allows our components to build out a nested root structure.
129
00:11:58,370 --> 00:12:00,140
So what do I mean by nested routes?
130
00:12:00,890 --> 00:12:07,520
Well, let's say, for example, our topic detail page renders a bunch of links, right or sorry, our
131
00:12:07,520 --> 00:12:12,160
topic list page renders a bunch of links to a bunch of topic details.
132
00:12:13,320 --> 00:12:14,910
Well, we could have the link.
133
00:12:17,180 --> 00:12:19,190
And this link will go to.
134
00:12:20,050 --> 00:12:25,840
A dynamically generated route, let's say, we want to say.
135
00:12:27,430 --> 00:12:31,690
Prop stop, match dot, you are right.
136
00:12:31,960 --> 00:12:34,720
So we want to use the current URL.
137
00:12:36,690 --> 00:12:42,620
And then we want to say that we want to go to any topic detail, right.
138
00:12:42,690 --> 00:12:45,660
We want to go to let's say I want to go to 13, for example.
139
00:12:46,170 --> 00:12:48,930
And this one is too topic 13.
140
00:12:50,900 --> 00:12:53,660
And let's do this for a couple others.
141
00:12:53,760 --> 00:12:56,840
Seventeen, twenty one, these are all just random.
142
00:12:58,850 --> 00:13:08,690
Well, now it doesn't matter where our topics list is, it will always now be aware and know how.
143
00:13:10,250 --> 00:13:12,180
To take us to that, you are all right.
144
00:13:12,350 --> 00:13:21,290
Even if our topics list was at some obscure Long You URL.
145
00:13:22,580 --> 00:13:24,290
That it was not aware of.
146
00:13:25,480 --> 00:13:28,300
Assuming that this was the case, right?
147
00:13:31,930 --> 00:13:33,970
Now we can change it in our route.
148
00:13:39,340 --> 00:13:44,450
But now our topics list doesn't care, let me just hide our homepage as well.
149
00:13:45,070 --> 00:13:54,580
Now our topics list doesn't care about anything regarding where are you are l is from the point of where
150
00:13:54,610 --> 00:13:55,420
it matched.
151
00:13:56,140 --> 00:14:04,960
All it cares about is that I'm trying to render out or take you to different topics right from my path
152
00:14:05,200 --> 00:14:05,920
onwards.
153
00:14:07,270 --> 00:14:15,860
So this is how we can build out dynamic routing without our topics list, being aware of the entire
154
00:14:15,860 --> 00:14:16,930
you are all right.
155
00:14:17,410 --> 00:14:25,660
And we can now reuse this topic list in multiple places as long as our topic, our topic detail, as
156
00:14:25,660 --> 00:14:28,900
long as we have the appropriate routes for it so we can even replicate this.
157
00:14:30,280 --> 00:14:32,380
With just a blog topics.
158
00:14:35,090 --> 00:14:37,770
But we can still use the same component for.
159
00:14:39,380 --> 00:14:43,550
Because now, right, we have this topic list that works.
160
00:14:45,030 --> 00:14:48,060
But we also have this topic list that works.
161
00:14:49,650 --> 00:14:55,680
And they can take you to different topics, essentially, we've still just we've compartmentalized and
162
00:14:55,710 --> 00:15:02,030
able to reuse our topic list and topic detail with dynamic routing.
163
00:15:02,790 --> 00:15:07,350
That's why this match property is useful.
164
00:15:07,950 --> 00:15:10,500
So we will see this a little bit more.
165
00:15:10,530 --> 00:15:16,530
So these are still very abstract concepts, but it's very valuable for us right now to know what they
166
00:15:16,530 --> 00:15:16,810
are.
167
00:15:17,730 --> 00:15:21,840
So armed with this knowledge, let's keep building our application.
16091
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.