- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.720 --> 00:00:02.870
Now that we've created our page components,
2
00:00:02.870 --> 00:00:05.190
it's time for us to walk through
3
00:00:05.190 --> 00:00:09.110
how we can implement routing in a React application.
4
00:00:09.110 --> 00:00:11.980
So that's what we're gonna get started with in this guide.
5
00:00:11.980 --> 00:00:13.560
So right now I have the server running
6
00:00:13.560 --> 00:00:17.630
and if I come up here into the URL bar
7
00:00:17.630 --> 00:00:19.750
and go to local host 8080,
8
00:00:19.750 --> 00:00:23.500
I wanna be able to type slash about
9
00:00:23.500 --> 00:00:27.120
and then be navigated to the about component.
10
00:00:27.120 --> 00:00:28.550
But that's not working now
11
00:00:28.550 --> 00:00:30.940
and before we get into implementing
12
00:00:30.940 --> 00:00:33.590
how we can build the router,
13
00:00:33.590 --> 00:00:36.324
it's very important for you to understand
14
00:00:36.324 --> 00:00:39.850
why a routing system is needed.
15
00:00:39.850 --> 00:00:43.820
Because if you went through the coding foundations course,
16
00:00:43.820 --> 00:00:47.840
then you built out the static HTML page.
17
00:00:47.840 --> 00:00:51.320
You may have remembered that a in order to implement routing
18
00:00:51.320 --> 00:00:55.570
all you had to do was to place a link where the user
19
00:00:55.570 --> 00:00:57.340
could click on it and then make sure
20
00:00:57.340 --> 00:01:01.750
that link was mapped to whatever HTML file
21
00:01:01.750 --> 00:01:04.750
had the content that you wanted to show.
22
00:01:04.750 --> 00:01:06.250
So if you're on the homepage,
23
00:01:06.250 --> 00:01:09.520
you would have a link to the about page
24
00:01:09.520 --> 00:01:12.660
or the menu page and you would simply point
25
00:01:12.660 --> 00:01:15.400
to that file path.
26
00:01:15.400 --> 00:01:17.520
Well, we can't do that in React,
27
00:01:17.520 --> 00:01:20.100
because if you remember and this goes back
28
00:01:20.100 --> 00:01:23.480
to part of the reason why I really spent a lot of time
29
00:01:23.480 --> 00:01:25.810
going through the file system.
30
00:01:25.810 --> 00:01:29.030
If you remember, our application
31
00:01:29.030 --> 00:01:32.330
only has one HTML file.
32
00:01:32.330 --> 00:01:34.930
So we can't follow the same rules
33
00:01:34.930 --> 00:01:39.930
that we did whenever we implemented a static HTML site,
34
00:01:40.020 --> 00:01:42.920
because a static HTML site is based
35
00:01:42.920 --> 00:01:45.320
on the concept of documents
36
00:01:45.320 --> 00:01:48.180
and having a set of HTML documents
37
00:01:48.180 --> 00:01:50.160
and then linking between them.
38
00:01:50.160 --> 00:01:52.000
In a React application,
39
00:01:52.000 --> 00:01:55.710
your React application could have thousands of pages,
40
00:01:55.710 --> 00:01:58.680
but it's still only one document.
41
00:01:58.680 --> 00:02:00.270
And so because of that,
42
00:02:00.270 --> 00:02:03.780
that's why we need to build out a routing system.
43
00:02:03.780 --> 00:02:07.299
So what React router's doing is it essentially
44
00:02:07.299 --> 00:02:11.690
mimicking what type of behavior we have
45
00:02:11.690 --> 00:02:14.720
when we link between documents,
46
00:02:14.720 --> 00:02:17.550
but it's allowing that all to happen
47
00:02:17.550 --> 00:02:19.970
in the React ecosystem.
48
00:02:19.970 --> 00:02:22.270
And don't worry if that doesn't make sense yet,
49
00:02:22.270 --> 00:02:24.900
I'm gonna explain it along the way.
50
00:02:24.900 --> 00:02:26.190
So let's get started.
51
00:02:26.190 --> 00:02:29.820
I'm gonna first create a dedicated router file.
52
00:02:29.820 --> 00:02:32.260
So if you open up the file system,
53
00:02:32.260 --> 00:02:36.330
and then I'm gonna click on SRC as a directory
54
00:02:36.330 --> 00:02:38.080
and then click new file
55
00:02:38.080 --> 00:02:39.940
and then I'm gonna create a new directory
56
00:02:39.940 --> 00:02:44.680
inside of SRC called utils, short for utilities,
57
00:02:44.680 --> 00:02:49.237
slash and then let's call this one just router dot TS.
58
00:02:50.690 --> 00:02:54.780
Now, notice that I'm using the lowercase
59
00:02:54.780 --> 00:02:59.300
instead of uppercase and the reason for that is,
60
00:02:59.300 --> 00:03:01.990
and actually did TS, part of the reason for that
61
00:03:01.990 --> 00:03:05.290
is 'cause I in my day-to-day development,
62
00:03:05.290 --> 00:03:10.290
I write in typescript and so TS is the file name for that.
63
00:03:10.370 --> 00:03:12.200
But JS is for JavaScript.
64
00:03:12.200 --> 00:03:17.200
So, the reason why I place a capital naming structure
65
00:03:17.520 --> 00:03:22.100
for our components and then a lowercase naming structure
66
00:03:22.100 --> 00:03:25.219
for utilities is to clearly define
67
00:03:25.219 --> 00:03:29.760
which files have JSX code in them.
68
00:03:29.760 --> 00:03:33.590
So for example, the router is not going
69
00:03:33.590 --> 00:03:37.040
to render any actual JSX code.
70
00:03:37.040 --> 00:03:41.180
It's simply going to let us organize some of our routes.
71
00:03:41.180 --> 00:03:42.350
That's all it's doing.
72
00:03:42.350 --> 00:03:43.560
You're gonna see later on,
73
00:03:43.560 --> 00:03:46.640
we're gonna create a tool that allows us
74
00:03:46.640 --> 00:03:49.380
to connect up and call APIs.
75
00:03:49.380 --> 00:03:51.840
So they allow us to call other servers.
76
00:03:51.840 --> 00:03:54.910
That tool is gonna be a API connector tool.
77
00:03:54.910 --> 00:03:57.210
I'm also gonna make that one lowercase.
78
00:03:57.210 --> 00:03:58.400
And the reason for that,
79
00:03:58.400 --> 00:04:02.750
it's nothing that has to deal with code.
80
00:04:02.750 --> 00:04:05.510
I could call this router with a capital R
81
00:04:05.510 --> 00:04:08.360
and then call it from within an application
82
00:04:08.360 --> 00:04:10.190
and it would work fine,
83
00:04:10.190 --> 00:04:13.290
but that's not really the best convention to follow
84
00:04:13.290 --> 00:04:16.390
and the reason is because React
85
00:04:16.390 --> 00:04:18.770
when it sees something like this,
86
00:04:18.770 --> 00:04:23.770
when it sees code like router, it's going to assume
87
00:04:23.870 --> 00:04:27.830
that you're trying to call a JSX-based component
88
00:04:27.830 --> 00:04:29.520
and you're trying to actually render
89
00:04:29.520 --> 00:04:31.040
something on the screen.
90
00:04:31.040 --> 00:04:34.595
But all we're trying to do is to simply
91
00:04:34.595 --> 00:04:37.530
organize our set of routes, and so that's the reason
92
00:04:37.530 --> 00:04:39.554
why you'll see this is the convention
93
00:04:39.554 --> 00:04:42.390
whenever you're creating helper utilities
94
00:04:42.390 --> 00:04:46.140
or anything like that is to use lowercase in the file name.
95
00:04:46.140 --> 00:04:48.300
So, I'm gonna delete that
96
00:04:48.300 --> 00:04:50.720
and let's actually create our routes.
97
00:04:50.720 --> 00:04:55.090
So I'm gonna first import React from React,
98
00:04:55.090 --> 00:04:56.860
and the next thing I'm gonna import
99
00:04:56.860 --> 00:04:59.860
is gonna be the route system.
100
00:04:59.860 --> 00:05:03.420
So here, I'm gonna say import, curly brackets,
101
00:05:03.420 --> 00:05:06.380
and then route, not router, route,
102
00:05:06.380 --> 00:05:08.290
and then I'm gonna import that
103
00:05:08.290 --> 00:05:13.290
from React dash router dash dom.
104
00:05:13.440 --> 00:05:15.780
And the difference between React router
105
00:05:15.780 --> 00:05:20.210
and React router dom is React router you could think of
106
00:05:20.210 --> 00:05:23.070
as the abstract code library.
107
00:05:23.070 --> 00:05:28.070
So that has the core routing fundamentals and features.
108
00:05:28.870 --> 00:05:33.030
React router dom is specific when you're wanting
109
00:05:33.030 --> 00:05:37.580
to implement routing for documents essentially.
110
00:05:37.580 --> 00:05:40.290
So for the document object model
111
00:05:40.290 --> 00:05:42.910
which essentially means browsers.
112
00:05:42.910 --> 00:05:45.650
So that's why we're importing the route
113
00:05:45.650 --> 00:05:47.470
from React router dom.
114
00:05:47.470 --> 00:05:51.050
Now from here, we're going to simply export,
115
00:05:51.050 --> 00:05:53.120
default, an array.
116
00:05:53.120 --> 00:05:57.230
So we're gonna export an array of routes.
117
00:05:57.230 --> 00:06:01.210
The first one is gonna be our home component.
118
00:06:01.210 --> 00:06:02.960
So the way we can do this is
119
00:06:02.960 --> 00:06:05.860
by first calling our route component
120
00:06:05.860 --> 00:06:08.510
that we imported from React router dom,
121
00:06:08.510 --> 00:06:11.620
and then we're gonna say exact, and I'm gonna talk about
122
00:06:11.620 --> 00:06:15.040
what each one of these properties mean here momentarily,
123
00:06:15.040 --> 00:06:17.580
and then I'm gonna provide a key.
124
00:06:17.580 --> 00:06:19.890
Now this key is completely up to us.
125
00:06:19.890 --> 00:06:22.220
This key is something we have to pass in
126
00:06:22.220 --> 00:06:26.820
anytime we're working with a array or a collection
127
00:06:26.820 --> 00:06:28.650
of values with React.
128
00:06:28.650 --> 00:06:30.550
So I'm just gonna call mine home,
129
00:06:30.550 --> 00:06:35.160
and then path, and then for that it's a string
130
00:06:35.160 --> 00:06:39.950
with simply, we're simply passing in a slash mark,
131
00:06:39.950 --> 00:06:43.600
and then from there we have to define the component.
132
00:06:43.600 --> 00:06:48.580
So, component equals and then in curly brackets,
133
00:06:48.580 --> 00:06:51.320
I wanna use the home component.
134
00:06:51.320 --> 00:06:53.210
So I'm gonna show you another little trick.
135
00:06:53.210 --> 00:06:56.580
In the last guide, I showed you the prettier extension.
136
00:06:56.580 --> 00:06:59.860
Now I'm gonna show you the auto-import extension.
137
00:06:59.860 --> 00:07:03.090
So I'm going to simply start typing home
138
00:07:03.090 --> 00:07:05.130
and then do you see there at the top
139
00:07:05.130 --> 00:07:10.130
it has the word home and then a path to our home component?
140
00:07:10.740 --> 00:07:14.740
If I just hit tab, it brings that home component
141
00:07:14.740 --> 00:07:17.709
down to us and then I'm gonna close that out.
142
00:07:17.709 --> 00:07:20.140
If you're curious on that extension
143
00:07:20.140 --> 00:07:25.037
go to VS Code and that one is called auto-import.
144
00:07:27.260 --> 00:07:28.093
Just like this.
145
00:07:28.093 --> 00:07:31.020
You can see I already have it installed for me
146
00:07:31.020 --> 00:07:34.260
and that is another very helpful tool.
147
00:07:34.260 --> 00:07:36.460
If you don't wanna have to manually type in
148
00:07:36.460 --> 00:07:40.570
every one of the components that you're trying to work with
149
00:07:40.570 --> 00:07:43.470
you can simply start typing out the component name
150
00:07:43.470 --> 00:07:45.960
and it'll import it automatically for you.
151
00:07:45.960 --> 00:07:49.180
So you can add that one if you are a fan of that one.
152
00:07:49.180 --> 00:07:51.100
Okay, so that's our home component.
153
00:07:51.100 --> 00:07:53.520
Let's create a few more calls.
154
00:07:53.520 --> 00:07:57.310
So the next one is gonna be to our about page.
155
00:07:57.310 --> 00:07:59.750
So what we're gonna change here is the key
156
00:07:59.750 --> 00:08:01.534
'cause the keys need to be unique
157
00:08:01.534 --> 00:08:05.190
and then the path is gonna be to about
158
00:08:05.190 --> 00:08:08.340
and then for the component, get rid of where it says home
159
00:08:08.340 --> 00:08:11.490
and just start typing about and then I'm gonna
160
00:08:11.490 --> 00:08:14.050
have auto-import import that one.
161
00:08:14.050 --> 00:08:16.340
And then lastly, is our blog.
162
00:08:16.340 --> 00:08:19.220
So here, it's gonna be key blog,
163
00:08:19.220 --> 00:08:22.470
slash blog, and then the component
164
00:08:22.470 --> 00:08:24.450
is gonna be blog.
165
00:08:24.450 --> 00:08:25.610
Not blob.
166
00:08:25.610 --> 00:08:28.460
Sometimes the auto-import, and you may see this a few times
167
00:08:28.460 --> 00:08:30.560
in the course, the auto-import
168
00:08:30.560 --> 00:08:33.850
seems kind of will make the wrong guess sometimes
169
00:08:33.850 --> 00:08:35.490
and it'll import something really weird.
170
00:08:35.490 --> 00:08:38.860
So make sure I'm selecting blog and there we go.
171
00:08:38.860 --> 00:08:42.380
So, we've imported each of our page components,
172
00:08:42.380 --> 00:08:46.510
and then we've listed them out here in an array.
173
00:08:46.510 --> 00:08:49.530
So before we actually implement our router,
174
00:08:49.530 --> 00:08:53.000
let's talk about each one of these route components.
175
00:08:53.000 --> 00:08:55.570
So, we're calling the route component
176
00:08:55.570 --> 00:08:58.230
which is provided from React router dom.
177
00:08:58.230 --> 00:09:01.860
Now, what are the set of keywords?
178
00:09:01.860 --> 00:09:04.820
What are these properties that we're passing in?
179
00:09:04.820 --> 00:09:08.900
Well, exact is telling React router
180
00:09:08.900 --> 00:09:13.900
that we want to only go to this and match this exact path.
181
00:09:16.070 --> 00:09:20.103
So for example, if I didn't put exact here,
182
00:09:21.260 --> 00:09:25.870
then this might capture something that says about slash
183
00:09:26.930 --> 00:09:29.550
something else, something like that,
184
00:09:29.550 --> 00:09:30.800
and that's not what we want.
185
00:09:30.800 --> 00:09:33.760
We only want this to work if someone goes
186
00:09:33.760 --> 00:09:37.560
to exactly local host 8080
187
00:09:37.560 --> 00:09:39.180
and eventually when it gets deployed,
188
00:09:39.180 --> 00:09:42.210
whatever your website is, slash about.
189
00:09:42.210 --> 00:09:44.300
So we want it to match exactly.
190
00:09:44.300 --> 00:09:47.580
Now another thing that you'll notice in React
191
00:09:47.580 --> 00:09:49.634
is sometimes you'll see properties
192
00:09:49.634 --> 00:09:54.634
where they list out just the name of the property
193
00:09:55.250 --> 00:09:58.250
and then sometimes you'll see it where they list a name,
194
00:09:58.250 --> 00:10:01.050
the equals sign and then some value.
195
00:10:01.050 --> 00:10:03.870
Whenever you see that, what that means
196
00:10:03.870 --> 00:10:07.830
is that this is a Boolean value
197
00:10:07.830 --> 00:10:10.920
which means it is either true or false.
198
00:10:10.920 --> 00:10:13.100
This is the only case where this works.
199
00:10:13.100 --> 00:10:16.840
So it really is kinda confusing if you've never seen
200
00:10:16.840 --> 00:10:17.920
this syntax before.
201
00:10:17.920 --> 00:10:21.200
You might wonder if this is a special kind of property
202
00:10:21.200 --> 00:10:22.610
or anything and it's not.
203
00:10:22.610 --> 00:10:27.140
It simply is saying that we want exact to be true
204
00:10:27.140 --> 00:10:32.140
and in fact, if I wanted, say I didn't like this syntax,
205
00:10:32.233 --> 00:10:35.900
I could write this code exactly like this.
206
00:10:35.900 --> 00:10:39.960
Exact equals, curly brackets, true.
207
00:10:39.960 --> 00:10:42.420
And then this is the exact same code.
208
00:10:42.420 --> 00:10:45.000
So, that is just something to kinda keep in mind
209
00:10:45.000 --> 00:10:46.820
if you're wondering, because you're gonna see
210
00:10:46.820 --> 00:10:49.780
that in documentation and other tutorials.
211
00:10:49.780 --> 00:10:52.660
If you're using a property that's a Boolean value,
212
00:10:52.660 --> 00:10:55.290
you can just type the name of the property
213
00:10:55.290 --> 00:10:57.530
if you want that value to be true.
214
00:10:57.530 --> 00:10:59.840
So I'm just going to revert that back,
215
00:10:59.840 --> 00:11:01.800
and so that's what exact means.
216
00:11:01.800 --> 00:11:04.410
Now the key, this is not something that
217
00:11:04.410 --> 00:11:07.080
has to deal with React router at all,
218
00:11:07.080 --> 00:11:09.930
this is something that we're gonna be working with
219
00:11:09.930 --> 00:11:12.620
in all of this project
220
00:11:12.620 --> 00:11:15.540
and in all of your React development career.
221
00:11:15.540 --> 00:11:20.380
So any time that we are iterating over a collection,
222
00:11:20.380 --> 00:11:24.110
so any time that React finds an array,
223
00:11:24.110 --> 00:11:26.960
we have to be explicit with React
224
00:11:26.960 --> 00:11:30.200
and tell it why one of the components
225
00:11:30.200 --> 00:11:32.910
is different than the other component.
226
00:11:32.910 --> 00:11:36.750
So React looks for is this key property
227
00:11:36.750 --> 00:11:38.230
and it has to be unique.
228
00:11:38.230 --> 00:11:41.740
So, we would get a big red warning
229
00:11:41.740 --> 00:11:45.200
if we tried to go to this site
230
00:11:45.200 --> 00:11:48.770
and we had two keys that were named home.
231
00:11:48.770 --> 00:11:50.510
You'd see that in the console.
232
00:11:50.510 --> 00:11:52.560
So we need to make sure this is unique.
233
00:11:52.560 --> 00:11:56.720
When we are iterating over other items that are dynamic.
234
00:11:56.720 --> 00:12:00.140
So, we're gonna do this multiple times in the course.
235
00:12:00.140 --> 00:12:03.390
So when we iterate over our collection
236
00:12:03.390 --> 00:12:06.980
of portfolio items, or when we iterate over blogs,
237
00:12:06.980 --> 00:12:09.160
those have to be unique as well.
238
00:12:09.160 --> 00:12:12.320
And so the way that we're able to accomplish that
239
00:12:12.320 --> 00:12:16.140
is by using some type of unique identifier.
240
00:12:16.140 --> 00:12:18.390
And so you'll see how we do that later in the course,
241
00:12:18.390 --> 00:12:19.600
but when you're hard coding it,
242
00:12:19.600 --> 00:12:21.680
you can just make sure that it's unique.
243
00:12:21.680 --> 00:12:25.750
The way I personally do it is by putting in the name
244
00:12:25.750 --> 00:12:28.475
of the path or the component name.
245
00:12:28.475 --> 00:12:30.532
Now, moving on.
246
00:12:30.532 --> 00:12:32.690
What is this path keyword?
247
00:12:32.690 --> 00:12:35.130
I think this one's kind of self-explanatory.
248
00:12:35.130 --> 00:12:38.090
This is the path that we want the users
249
00:12:38.090 --> 00:12:41.520
to have to navigate to for the route.
250
00:12:41.520 --> 00:12:45.460
Now make sure you always use a slash
251
00:12:45.460 --> 00:12:48.380
in front of the name or else it's not going to work.
252
00:12:48.380 --> 00:12:52.310
So if we want the users to just go to the homepage,
253
00:12:52.310 --> 00:12:54.570
that is the same as saying we want them
254
00:12:54.570 --> 00:12:57.470
to go to the path of slash.
255
00:12:57.470 --> 00:13:00.460
That is the route of the application.
256
00:13:00.460 --> 00:13:02.010
If we want them to go to the about page,
257
00:13:02.010 --> 00:13:06.160
it's gonna be slash about, and blog is gonna be slash blog.
258
00:13:06.160 --> 00:13:09.820
And then lastly, we have to tell React router
259
00:13:09.820 --> 00:13:14.820
where to map the path to the component.
260
00:13:15.860 --> 00:13:19.010
So here, we're just having to list out and say okay,
261
00:13:19.010 --> 00:13:22.925
when they go to just the route of the application,
262
00:13:22.925 --> 00:13:27.820
we want you to pull in and slide in the home component.
263
00:13:27.820 --> 00:13:29.050
When they go to about,
264
00:13:29.050 --> 00:13:31.990
we wanna slide in the about component.
265
00:13:31.990 --> 00:13:34.230
And so that is the way, at a high level,
266
00:13:34.230 --> 00:13:36.750
that is how the routing system works.
267
00:13:36.750 --> 00:13:40.120
So let's hit save here and I'm gonna navigate
268
00:13:40.120 --> 00:13:43.040
to the application file.
269
00:13:43.040 --> 00:13:46.690
So this is our core app file and we're gonna be able
270
00:13:46.690 --> 00:13:49.360
to get rid of this home import
271
00:13:49.360 --> 00:13:52.980
and we'll also get rid of this home import here
272
00:13:52.980 --> 00:13:54.960
inside of the app component.
273
00:13:54.960 --> 00:13:56.940
And let's do an import here.
274
00:13:56.940 --> 00:14:00.660
So I'm gonna say that we need to import two components
275
00:14:00.660 --> 00:14:02.720
from React router dom.
276
00:14:02.720 --> 00:14:06.350
The first one is gonna be browser router
277
00:14:06.350 --> 00:14:09.940
and then the second one is gonna be switch.
278
00:14:09.940 --> 00:14:14.940
And this is from React dash router dash dom.
279
00:14:15.130 --> 00:14:17.960
Now inside of our app component
280
00:14:17.960 --> 00:14:21.730
what we're gonna do is we're going to make a call,
281
00:14:21.730 --> 00:14:24.830
or actually let's first wrap all this up in a div
282
00:14:24.830 --> 00:14:27.030
just to make it easy to read.
283
00:14:27.030 --> 00:14:30.700
So I'm gonna say I wanna return a div here.
284
00:14:30.700 --> 00:14:32.640
Eventually we'll add a layout,
285
00:14:32.640 --> 00:14:35.230
but for right now let's not worry about it.
286
00:14:35.230 --> 00:14:37.010
And then inside of this div,
287
00:14:37.010 --> 00:14:39.490
I wanna bring in our browser router.
288
00:14:39.490 --> 00:14:41.860
And that's gonna have some child components,
289
00:14:41.860 --> 00:14:44.890
and the browser router children are gonna be
290
00:14:44.890 --> 00:14:49.230
this switch component and now inside of here
291
00:14:49.230 --> 00:14:52.180
is gonna be our call to router.
292
00:14:52.180 --> 00:14:54.560
So, let's go and let's come up to the top
293
00:14:54.560 --> 00:14:55.850
and import our router.
294
00:14:55.850 --> 00:14:58.370
So I'm gonna say import router
295
00:14:58.370 --> 00:15:03.370
from dot dot slash utils slash router.
296
00:15:04.340 --> 00:15:06.674
And now inside of this switch statement,
297
00:15:06.674 --> 00:15:11.674
place curly brackets, and then call router just like this.
298
00:15:12.190 --> 00:15:14.900
Hit save, and let's test this out.
299
00:15:14.900 --> 00:15:16.020
And look at that.
300
00:15:16.020 --> 00:15:18.560
If you remember, I had about already typed
301
00:15:18.560 --> 00:15:23.560
into the URL bar here and now that is working.
302
00:15:23.560 --> 00:15:25.870
Now if I delete about entirely
303
00:15:25.870 --> 00:15:28.290
and just go to local host 8080,
304
00:15:28.290 --> 00:15:30.480
you'll see our homepage is still working
305
00:15:30.480 --> 00:15:34.209
and then at the very top if I go to blog,
306
00:15:34.209 --> 00:15:36.970
you'll see the blog is working.
307
00:15:36.970 --> 00:15:40.040
So all of this is working properly.
308
00:15:40.040 --> 00:15:44.220
We've now implemented our base routing system.
309
00:15:44.220 --> 00:15:47.140
So users now have the ability to go
310
00:15:47.140 --> 00:15:49.690
and navigate between those pages.
311
00:15:49.690 --> 00:15:51.670
So, now that we have that in place,
312
00:15:51.670 --> 00:15:53.460
in the next guide, we're gonna see
313
00:15:53.460 --> 00:15:55.990
how we can use a link component
314
00:15:55.990 --> 00:15:59.303
to link users from one page to another.