- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.610 --> 00:00:03.400
In this guide, we're gonna extend our knowledge
2
00:00:03.400 --> 00:00:05.260
on how the routing system works.
3
00:00:05.260 --> 00:00:08.660
And we're gonna see how we can actually get data
4
00:00:08.660 --> 00:00:11.430
specifically from the routes
5
00:00:11.430 --> 00:00:13.740
that the application has access to.
6
00:00:13.740 --> 00:00:15.500
So the way we're gonna do that
7
00:00:15.500 --> 00:00:20.080
is we're gonna create a portfolio detail component.
8
00:00:20.080 --> 00:00:23.530
So what this is gonna do is it's gonna allow a user to click
9
00:00:23.530 --> 00:00:25.370
on one of these grid items,
10
00:00:25.370 --> 00:00:29.040
and then they'll be navigated to a different page.
11
00:00:29.040 --> 00:00:32.550
Now that page is gonna contain some more detail
12
00:00:32.550 --> 00:00:34.610
about the portfolio item.
13
00:00:34.610 --> 00:00:37.020
But how is it going to get that detail?
14
00:00:37.020 --> 00:00:40.440
Well, we could pass the data in as a prop,
15
00:00:40.440 --> 00:00:43.220
but that's not really what I wanna do in this case,
16
00:00:43.220 --> 00:00:46.330
because the concept that we're gonna learn in this guide
17
00:00:46.330 --> 00:00:50.090
is gonna be a very important skill for you to learn.
18
00:00:50.090 --> 00:00:51.410
And what that is,
19
00:00:51.410 --> 00:00:54.920
is I wanna be able to come up to the route up here,
20
00:00:54.920 --> 00:00:59.120
and I wanna have some route that's gonna say something like
21
00:00:59.120 --> 00:01:04.120
portfolio slash and then 123, something like that.
22
00:01:04.350 --> 00:01:07.910
Now this 123, is gonna be the ID
23
00:01:07.910 --> 00:01:11.270
for each one of these portfolio items.
24
00:01:11.270 --> 00:01:12.280
And what we're gonna do,
25
00:01:12.280 --> 00:01:16.100
is we're gonna see how we can get this unique ID
26
00:01:16.100 --> 00:01:17.550
out of the route,
27
00:01:17.550 --> 00:01:21.380
and then we can have access to it in the component itself.
28
00:01:21.380 --> 00:01:23.030
And then in the next guide,
29
00:01:23.030 --> 00:01:25.010
we're gonna see how we can actually make
30
00:01:25.010 --> 00:01:29.420
a dedicated API call to retrieve a single record.
31
00:01:29.420 --> 00:01:31.260
This is gonna follow a pattern
32
00:01:31.260 --> 00:01:32.960
that you're gonna see quite a bit
33
00:01:32.960 --> 00:01:35.500
when you're building out React applications,
34
00:01:35.500 --> 00:01:37.700
is the ability to go
35
00:01:37.700 --> 00:01:40.920
and get an isolated piece of data from a server,
36
00:01:40.920 --> 00:01:43.490
and then bring it back and render it on the screen.
37
00:01:43.490 --> 00:01:46.140
So in this guide, all we're gonna focus on
38
00:01:46.140 --> 00:01:50.640
is the ability to create a new component, a new route,
39
00:01:50.640 --> 00:01:53.160
and then we're gonna see how we can get access
40
00:01:53.160 --> 00:01:56.700
to this dynamic data up in the route.
41
00:01:56.700 --> 00:01:58.627
So let's get started with that.
42
00:01:58.627 --> 00:02:01.510
I'm gonna open up Visual Studio Code here.
43
00:02:01.510 --> 00:02:06.190
And in the file system, I'm gonna create a new page.
44
00:02:06.190 --> 00:02:08.730
So open up your pages directory.
45
00:02:08.730 --> 00:02:11.178
And I'm gonna create a new file here.
46
00:02:11.178 --> 00:02:16.178
And let's just call it PortfolioDetail.js
47
00:02:16.750 --> 00:02:17.970
just like this.
48
00:02:17.970 --> 00:02:21.300
And I'm just gonna make this a pretty basic component.
49
00:02:21.300 --> 00:02:24.510
So I'll say import react from react.
50
00:02:24.510 --> 00:02:28.010
And then I'm also going to import that dashboard layout
51
00:02:28.010 --> 00:02:29.350
just so we have access to it.
52
00:02:29.350 --> 00:02:33.390
So I'm gonna say import dashboard layout
53
00:02:33.390 --> 00:02:37.930
from dot dot slash components slash layouts
54
00:02:37.930 --> 00:02:39.860
slash dashboardLayout.
55
00:02:39.860 --> 00:02:41.900
So now we have access to all of that.
56
00:02:41.900 --> 00:02:45.350
And now I'm gonna say export default.
57
00:02:45.350 --> 00:02:48.790
Now this one, we are gonna have access to the props
58
00:02:48.790 --> 00:02:50.050
and we want that access
59
00:02:50.050 --> 00:02:53.580
because this is how we're gonna get the ability
60
00:02:53.580 --> 00:02:56.440
to see the ID up in the URL.
61
00:02:56.440 --> 00:02:58.070
So I'm just gonna say props
62
00:02:58.070 --> 00:03:01.030
is gonna be taken in by this component,
63
00:03:01.030 --> 00:03:03.410
and then I'm gonna do a fat arrow function.
64
00:03:03.410 --> 00:03:07.110
And now inside of here, I'm gonna say return.
65
00:03:07.110 --> 00:03:11.710
And then let's simply return the dashboard layout.
66
00:03:11.710 --> 00:03:14.950
And then inside of it, we'll put an h1 tag for right now,
67
00:03:14.950 --> 00:03:18.600
that just says portfolio detail.
68
00:03:18.600 --> 00:03:21.890
Now, up here at the top right above the return statement,
69
00:03:21.890 --> 00:03:25.210
this is where I'm going to print out some data.
70
00:03:25.210 --> 00:03:29.260
So here I'll say, console log.
71
00:03:29.260 --> 00:03:32.050
And let's just say that these are the props
72
00:03:32.050 --> 00:03:34.093
for the portfolio detail.
73
00:03:35.220 --> 00:03:38.090
And then let's print out those props.
74
00:03:38.090 --> 00:03:40.630
And this is gonna show us the object
75
00:03:40.630 --> 00:03:43.280
that we're gonna be able to utilize
76
00:03:43.280 --> 00:03:45.950
so that we can grab that unique ID.
77
00:03:45.950 --> 00:03:47.670
So I'll hit Save here,
78
00:03:47.670 --> 00:03:50.880
and this is the portfolio detail component.
79
00:03:50.880 --> 00:03:54.270
Now let's open up our router file.
80
00:03:54.270 --> 00:03:57.960
And I'm gonna add a new route here at the bottom.
81
00:03:57.960 --> 00:03:59.700
So this new route,
82
00:03:59.700 --> 00:04:02.330
I'll close that off so we can see everything,
83
00:04:02.330 --> 00:04:07.330
this new route, I'm gonna use the key of portfolio
84
00:04:08.320 --> 00:04:09.780
dash detail.
85
00:04:09.780 --> 00:04:12.920
And now the path here is gonna look a little bit different.
86
00:04:12.920 --> 00:04:14.750
We're gonna use a different syntax
87
00:04:14.750 --> 00:04:17.210
and we have done up until this point.
88
00:04:17.210 --> 00:04:21.080
I'm gonna say slash and then portfolio,
89
00:04:21.080 --> 00:04:24.770
slash and then colon ID.
90
00:04:24.770 --> 00:04:27.340
So what exactly are we doing here?
91
00:04:27.340 --> 00:04:30.700
Well, the way that you can create dynamic routes,
92
00:04:30.700 --> 00:04:33.820
'cause what this is gonna work out to be is,
93
00:04:33.820 --> 00:04:38.000
in one case, this might be portfolio slash 123.
94
00:04:38.000 --> 00:04:41.300
Another time it might be 789, that kinda thing.
95
00:04:41.300 --> 00:04:46.300
It's gonna be whatever the ID of that portfolio is.
96
00:04:46.480 --> 00:04:48.120
So it needs to be dynamic,
97
00:04:48.120 --> 00:04:50.780
which means we can't hard code it in here.
98
00:04:50.780 --> 00:04:51.810
So what we can do
99
00:04:51.810 --> 00:04:56.040
when we need a dynamic route with a dynamic value,
100
00:04:56.040 --> 00:05:00.780
we use a colon followed by whatever we wanna call this.
101
00:05:00.780 --> 00:05:05.780
So it could be ID, it could be slug, it could be you uiud,
102
00:05:06.500 --> 00:05:09.640
it's really whatever you personally wanna call it.
103
00:05:09.640 --> 00:05:12.370
That one's up to you, I'm using ID,
104
00:05:12.370 --> 00:05:16.300
and then we need to import the component that we wanna use.
105
00:05:16.300 --> 00:05:19.413
So here I'm gonna say import PortfolioDetail
106
00:05:21.010 --> 00:05:25.827
from dot dot slash pages slash PortfolioDetail.
107
00:05:26.750 --> 00:05:28.990
And that is what we're gonna be using
108
00:05:28.990 --> 00:05:31.300
for the component in this route.
109
00:05:31.300 --> 00:05:33.790
So I'm gonna paste that in, hit Save,
110
00:05:33.790 --> 00:05:35.500
and now we have that route.
111
00:05:35.500 --> 00:05:37.370
And now the last thing we need to do
112
00:05:37.370 --> 00:05:41.054
is we need to link the portfolio item
113
00:05:41.054 --> 00:05:44.710
and direct it straight to this portfolio detail.
114
00:05:44.710 --> 00:05:45.810
So let's do that.
115
00:05:45.810 --> 00:05:50.070
I'm gonna open up the portfolio item.
116
00:05:50.070 --> 00:05:53.640
And let's use react router and bring in our link.
117
00:05:53.640 --> 00:05:56.760
So I'll say import with curly brackets.
118
00:05:56.760 --> 00:06:00.860
And this one is just link from react
119
00:06:00.860 --> 00:06:04.440
dash router dash dom.
120
00:06:04.440 --> 00:06:07.930
And we are now gonna wrap up this entire div here
121
00:06:07.930 --> 00:06:10.220
with a link component.
122
00:06:10.220 --> 00:06:14.300
So I'll say link to equals,
123
00:06:14.300 --> 00:06:15.780
and then curly brackets,
124
00:06:15.780 --> 00:06:18.240
because we need this part to be dynamic.
125
00:06:18.240 --> 00:06:21.220
And then make sure you close off the entire div.
126
00:06:21.220 --> 00:06:22.640
So come to the very end here,
127
00:06:22.640 --> 00:06:25.310
at the very end in your last div
128
00:06:25.310 --> 00:06:27.960
and add that link closing tag.
129
00:06:27.960 --> 00:06:31.780
Now the to is gonna need to use string interpolation.
130
00:06:31.780 --> 00:06:33.790
So I'm gonna use backticks.
131
00:06:33.790 --> 00:06:38.790
And then we'll say slash portfolio slash
132
00:06:38.810 --> 00:06:41.680
and now this is where we need the ID.
133
00:06:41.680 --> 00:06:44.090
Well, how do we get access to that?
134
00:06:44.090 --> 00:06:46.500
Well, right up here in props item,
135
00:06:46.500 --> 00:06:49.330
if you wanna console log it out, you definitely can,
136
00:06:49.330 --> 00:06:51.990
props item has access to an ID.
137
00:06:51.990 --> 00:06:56.720
So we can bring that in when we're performing de-structuring
138
00:06:56.720 --> 00:07:00.040
and we can say okay, now we also wanna grab the ID
139
00:07:00.040 --> 00:07:01.510
from props item.
140
00:07:01.510 --> 00:07:05.760
And now for the portfolio, we can use string interpolation.
141
00:07:05.760 --> 00:07:09.380
So I can say dollar curly brackets ID.
142
00:07:09.380 --> 00:07:13.100
So what this is gonna be is that means this link tag,
143
00:07:13.100 --> 00:07:16.970
in one case, it's gonna be portfolio slash 123,
144
00:07:16.970 --> 00:07:19.280
the next time it's gonna be some other ID.
145
00:07:19.280 --> 00:07:22.120
This is gonna make it so that it is dynamic
146
00:07:22.120 --> 00:07:26.660
and it changes for each one of your portfolio items.
147
00:07:26.660 --> 00:07:28.940
So let's hit Save here and let's open it up
148
00:07:28.940 --> 00:07:31.030
and see if this is working.
149
00:07:31.030 --> 00:07:34.750
So I'm going to open this up and I actually clicked it
150
00:07:34.750 --> 00:07:37.280
and it looks like it did work, so that's good.
151
00:07:37.280 --> 00:07:39.440
But let's go back to the homepage
152
00:07:39.440 --> 00:07:41.460
just so you can see it all in action.
153
00:07:41.460 --> 00:07:45.190
And let me click on let's say this one,
154
00:07:45.190 --> 00:07:46.840
I'll click on the DevCamp one.
155
00:07:46.840 --> 00:07:47.980
Now if I click on this,
156
00:07:47.980 --> 00:07:50.990
you can see we were navigated to a different page,
157
00:07:50.990 --> 00:07:53.200
we are navigated to portfolio detail,
158
00:07:53.200 --> 00:07:55.930
and you can see up here our routing system is working,
159
00:07:55.930 --> 00:07:58.900
we're now at localhost 8080, portfolio,
160
00:07:58.900 --> 00:08:02.220
and then this 17547.
161
00:08:02.220 --> 00:08:04.790
And now I have the console open here.
162
00:08:04.790 --> 00:08:08.543
If I click on it, let's see how we can get access to 17547.
163
00:08:10.620 --> 00:08:13.440
I can open up this object, our props object.
164
00:08:13.440 --> 00:08:17.330
And now as you can see, we have a few different items,
165
00:08:17.330 --> 00:08:21.070
we have history, location, and then match.
166
00:08:21.070 --> 00:08:22.217
So let's open up,
167
00:08:22.217 --> 00:08:24.350
and definitely look through each one of these,
168
00:08:24.350 --> 00:08:26.040
'cause this is something
169
00:08:26.040 --> 00:08:28.320
that you're gonna be able to use quite a bit
170
00:08:28.320 --> 00:08:30.710
is diving into this routing system.
171
00:08:30.710 --> 00:08:33.070
And the more that you look at the data,
172
00:08:33.070 --> 00:08:35.550
the better you're gonna be as a developer.
173
00:08:35.550 --> 00:08:38.790
So if I look at this match object right here,
174
00:08:38.790 --> 00:08:41.300
this is where we're wanting to go.
175
00:08:41.300 --> 00:08:45.890
So this match object contains something called params.
176
00:08:45.890 --> 00:08:48.430
So here I can grab params.
177
00:08:48.430 --> 00:08:53.430
And now you can see I have my ID which is that 17547.
178
00:08:53.630 --> 00:08:56.010
So if you wanna kinda follow this along,
179
00:08:56.010 --> 00:08:59.760
we have props dot
180
00:08:59.760 --> 00:09:04.610
and then we access match dot params dot id.
181
00:09:06.690 --> 00:09:08.880
Now, this ID right here,
182
00:09:08.880 --> 00:09:13.400
this is that exact name that we gave in the router.
183
00:09:13.400 --> 00:09:16.300
So say I would have gone with the word slug,
184
00:09:16.300 --> 00:09:18.900
then instead of it saying ID here,
185
00:09:18.900 --> 00:09:22.410
it would have said, slug, just like this,
186
00:09:22.410 --> 00:09:25.400
but we called it ID, so that's why we have that name.
187
00:09:25.400 --> 00:09:26.650
Now let's test this out.
188
00:09:26.650 --> 00:09:29.520
So I'm going to just copy this,
189
00:09:29.520 --> 00:09:31.500
and I'll close out my console.
190
00:09:31.500 --> 00:09:34.260
And now let's come into Visual Studio Code
191
00:09:34.260 --> 00:09:36.560
and go to portfolio detail.
192
00:09:36.560 --> 00:09:40.420
I'm gonna say portfolio detail for
193
00:09:40.420 --> 00:09:44.650
and let's use our curly brackets here.
194
00:09:44.650 --> 00:09:48.660
And then I'm gonna say props match params ID,
195
00:09:48.660 --> 00:09:50.160
hit Save,
196
00:09:50.160 --> 00:09:51.980
come back to Google Chrome,
197
00:09:51.980 --> 00:09:53.520
and there you go, look at that.
198
00:09:53.520 --> 00:09:57.380
We have 17547, click on Home again.
199
00:09:57.380 --> 00:09:59.300
Let's go to something else.
200
00:09:59.300 --> 00:10:03.690
So go to this one, now you can see this is a different ID,
201
00:10:03.690 --> 00:10:06.270
this is 46 instead of 47.
202
00:10:06.270 --> 00:10:07.990
So this is pretty cool.
203
00:10:07.990 --> 00:10:12.030
We now have the ability to have dynamic routes,
204
00:10:12.030 --> 00:10:13.500
and then you were able to see
205
00:10:13.500 --> 00:10:17.260
how we were able to leverage the routing system
206
00:10:17.260 --> 00:10:19.620
and then pass through
207
00:10:19.620 --> 00:10:22.180
the data that our props have access to.
208
00:10:22.180 --> 00:10:23.410
And we were able to see
209
00:10:23.410 --> 00:10:26.350
that one of those key items we have access to
210
00:10:26.350 --> 00:10:29.020
are the parameters up here in the URL.
211
00:10:29.020 --> 00:10:33.010
That is how we're able to tell what page we're on.
212
00:10:33.010 --> 00:10:35.080
And then once we have that information,
213
00:10:35.080 --> 00:10:38.490
we're able to add some behavior to the application.
214
00:10:38.490 --> 00:10:41.400
And that leads us perfectly into the next guide.
215
00:10:41.400 --> 00:10:42.600
In the next guide,
216
00:10:42.600 --> 00:10:46.640
we're gonna extend the process we just ran through here,
217
00:10:46.640 --> 00:10:49.420
where we were able to get that unique ID,
218
00:10:49.420 --> 00:10:51.000
and in the next guide,
219
00:10:51.000 --> 00:10:53.710
we're gonna see how we can make an API call
220
00:10:53.710 --> 00:10:58.180
to go and bring back a single portfolio item
221
00:10:58.180 --> 00:11:01.623
so that we can render it directly here on this page.