WEBVTT

1
00:00:00.350 --> 00:00:02.950
Now that we've built out our routing engine,

2
00:00:02.950 --> 00:00:06.790
now it's time to start linking our pages together,

3
00:00:06.790 --> 00:00:10.440
and so we're gonna learn about the Link component

4
00:00:10.440 --> 00:00:13.580
provided by react-router-dom.

5
00:00:13.580 --> 00:00:14.670
So let's get started.

6
00:00:14.670 --> 00:00:17.040
I'm gonna open up the file system here,

7
00:00:17.040 --> 00:00:21.420
and I'm gonna navigate to our NavBar,

8
00:00:21.420 --> 00:00:23.830
because I think this makes the most sense

9
00:00:23.830 --> 00:00:26.290
for us to place our links here.

10
00:00:26.290 --> 00:00:28.090
So the first thing we need to do

11
00:00:28.090 --> 00:00:30.620
is import the Link component.

12
00:00:30.620 --> 00:00:33.040
So I'm gonna say import Link,

13
00:00:33.040 --> 00:00:36.000
and make sure it's capitalized like this,

14
00:00:36.000 --> 00:00:39.823
from react-router-dom.

15
00:00:41.000 --> 00:00:43.440
And that's all we now to do to import it.

16
00:00:43.440 --> 00:00:46.640
Now let's make these items clickable.

17
00:00:46.640 --> 00:00:49.800
So I'm gonna start to clean this up a little bit as well.

18
00:00:49.800 --> 00:00:51.860
So I'm gonna keep the logo there,

19
00:00:51.860 --> 00:00:54.500
and I'm gonna keep the name there.

20
00:00:54.500 --> 00:00:57.420
For the home and the portfolio

21
00:00:57.420 --> 00:00:59.520
we're not gonna use the name portfolio

22
00:00:59.520 --> 00:01:02.590
'cause our home page is actually gonna have the portfolio,

23
00:01:02.590 --> 00:01:05.930
and we're not gonna make these divs for right now.

24
00:01:05.930 --> 00:01:09.410
For right now let's just bring in our Link component.

25
00:01:09.410 --> 00:01:12.840
So I'm gonna say less than sign Link

26
00:01:12.840 --> 00:01:17.000
and then, so that's gonna call the component, to,

27
00:01:17.000 --> 00:01:19.170
and then this is just gonna be a string.

28
00:01:19.170 --> 00:01:21.350
So this is gonna be our home page.

29
00:01:21.350 --> 00:01:23.960
So I'm gonna say to Home,

30
00:01:23.960 --> 00:01:25.910
and let's create a few more of these.

31
00:01:25.910 --> 00:01:29.560
We know we have an about page, so that's gonna be About,

32
00:01:29.560 --> 00:01:33.833
and then we know we have a blog, so I'll say Blog.

33
00:01:35.230 --> 00:01:37.620
Okay, hit Save right here,

34
00:01:37.620 --> 00:01:39.240
and when this refreshes,

35
00:01:39.240 --> 00:01:41.200
it's kinda tough to see because it's pretty small,

36
00:01:41.200 --> 00:01:44.780
but you can see that we do have now these three links.

37
00:01:44.780 --> 00:01:46.190
So now if I click on one of them,

38
00:01:46.190 --> 00:01:51.190
so say I click on Blog, I'm now navigated to the blog.

39
00:01:51.190 --> 00:01:52.400
So this is working.

40
00:01:52.400 --> 00:01:55.400
If I go back I can click on About

41
00:01:55.400 --> 00:01:58.190
and I'm navigated to the about page.

42
00:01:58.190 --> 00:02:00.430
So this is working perfectly.

43
00:02:00.430 --> 00:02:02.910
This is giving us exactly what we need.

44
00:02:02.910 --> 00:02:05.100
Now, if you want to link from,

45
00:02:05.100 --> 00:02:08.460
say the about page or the blog back,

46
00:02:08.460 --> 00:02:11.630
then we can simply call this NavBar component.

47
00:02:11.630 --> 00:02:15.610
So I'm gonna open up the blog page.

48
00:02:15.610 --> 00:02:19.120
And then inside of this return statement,

49
00:02:19.120 --> 00:02:20.760
I'm just gonna give us a little space here,

50
00:02:20.760 --> 00:02:23.273
and I'm gonna import that NavBar,

51
00:02:26.100 --> 00:02:31.040
hit Save, and so now if I click on Blog,

52
00:02:31.040 --> 00:02:33.260
you'll see that we have access to these links.

53
00:02:33.260 --> 00:02:35.020
So I can now click back home,

54
00:02:35.020 --> 00:02:36.650
and it takes me back there.

55
00:02:36.650 --> 00:02:40.200
So this is all working properly.

56
00:02:40.200 --> 00:02:43.500
Now, one thing you may have noticed is that the about page,

57
00:02:43.500 --> 00:02:45.260
if you click on this,

58
00:02:45.260 --> 00:02:48.100
the about page doesn't have our NavBar links,

59
00:02:48.100 --> 00:02:49.750
and that's, makes sense,

60
00:02:49.750 --> 00:02:52.380
because we haven't actually imported those

61
00:02:52.380 --> 00:02:56.040
into our app About component.

62
00:02:56.040 --> 00:03:00.500
Now we could go along and every page component that we get

63
00:03:00.500 --> 00:03:03.820
we could go and we could add in

64
00:03:03.820 --> 00:03:06.140
that navigation import,

65
00:03:06.140 --> 00:03:08.800
but that's not really the best approach.

66
00:03:08.800 --> 00:03:13.800
Instead, what we can do is we can create a layout

67
00:03:14.010 --> 00:03:17.320
and this is gonna teach us some really cool concepts.

68
00:03:17.320 --> 00:03:21.920
It's gonna teach us the idea of parent and child components,

69
00:03:21.920 --> 00:03:26.300
and how you can nest components inside of other components,

70
00:03:26.300 --> 00:03:28.360
and it's gonna give us the ability

71
00:03:28.360 --> 00:03:31.490
to create a layout component

72
00:03:31.490 --> 00:03:36.080
that the entire rest of the application can live inside.

73
00:03:36.080 --> 00:03:38.090
And so that's what we're gonna start doing

74
00:03:38.090 --> 00:03:39.653
in the next guide.

Resources

• Source code