WEBVTT

1
00:00:00.580 --> 00:00:02.750
This is gonna be a nice and short guide

2
00:00:02.750 --> 00:00:07.280
where you're gonna see how you can create active link styles

3
00:00:07.280 --> 00:00:09.080
using React Router.

4
00:00:09.080 --> 00:00:11.900
So remember the goal we're going for right here.

5
00:00:11.900 --> 00:00:15.060
The goal is that these nav links here

6
00:00:15.060 --> 00:00:18.490
will actually know the page that they're on

7
00:00:18.490 --> 00:00:22.540
and then they can use different styles accordingly.

8
00:00:22.540 --> 00:00:25.150
Thankfully, we don't have to write a lot of code

9
00:00:25.150 --> 00:00:27.040
in order to make this possible

10
00:00:27.040 --> 00:00:28.950
because we're using React Router.

11
00:00:28.950 --> 00:00:32.410
So if you switch back to Visual Studio Code here

12
00:00:32.410 --> 00:00:36.010
and you can go, I'm gonna close out our styles here

13
00:00:36.010 --> 00:00:37.700
'cause those aren't needed anymore.

14
00:00:37.700 --> 00:00:39.870
And come up here to the top.

15
00:00:39.870 --> 00:00:42.340
What you need to do to make this possible

16
00:00:42.340 --> 00:00:45.410
is instead of using the Link component,

17
00:00:45.410 --> 00:00:49.310
we're gonna use the NavLink component

18
00:00:49.310 --> 00:00:54.210
and then every time that we called Link,

19
00:00:54.210 --> 00:00:58.403
change that to say NavLink just like this.

20
00:01:02.900 --> 00:01:05.710
And if you hit Refresh right now on the page,

21
00:01:05.710 --> 00:01:07.130
you go back and you can see

22
00:01:07.130 --> 00:01:08.860
that nothing's actually different yet

23
00:01:08.860 --> 00:01:13.750
because NavLink is more of just a specialized form

24
00:01:13.750 --> 00:01:17.450
of the regular Link component

25
00:01:17.450 --> 00:01:21.350
but it has one very helpful little tool.

26
00:01:21.350 --> 00:01:24.420
And what that tool is is it gives you the ability

27
00:01:24.420 --> 00:01:29.420
to select and understand the link that you're currently on

28
00:01:29.620 --> 00:01:31.300
or the route you're currently on.

29
00:01:31.300 --> 00:01:34.050
So for example, if I'm on the About page,

30
00:01:34.050 --> 00:01:37.010
what the NavLink component does is it comes up

31
00:01:37.010 --> 00:01:38.800
to the top of the URL right here

32
00:01:38.800 --> 00:01:40.590
and it says okay, right now,

33
00:01:40.590 --> 00:01:43.810
I'm on the route that is /about

34
00:01:43.810 --> 00:01:46.000
and so what the NavLink can do

35
00:01:46.000 --> 00:01:48.800
is it gives you a special prop here.

36
00:01:48.800 --> 00:01:50.410
So let's switch to that.

37
00:01:50.410 --> 00:01:52.830
I'm gonna switch to Visual Studio Code here

38
00:01:52.830 --> 00:01:55.240
and so what it gives you the ability to do

39
00:01:55.240 --> 00:01:57.310
is to call this special prop

40
00:01:57.310 --> 00:01:58.910
and it is called activeClassName

41
00:02:00.770 --> 00:02:04.957
and we're gonna set that to active-nav-link

42
00:02:06.160 --> 00:02:08.460
and then we can go and apply this,

43
00:02:08.460 --> 00:02:13.460
add this prop to each one of these NavLink components.

44
00:02:15.570 --> 00:02:20.570
Hit Save and now, if you come back to the page itself,

45
00:02:22.010 --> 00:02:24.710
hit Refresh and you can see it's kind working.

46
00:02:24.710 --> 00:02:26.350
Notice how we're on the About page

47
00:02:26.350 --> 00:02:28.900
and it has the nice border here.

48
00:02:28.900 --> 00:02:30.110
If you come to the blog,

49
00:02:30.110 --> 00:02:32.340
you'll see that that's working too.

50
00:02:32.340 --> 00:02:33.940
Now, we have one little bug

51
00:02:33.940 --> 00:02:35.550
and I left it in there on purpose

52
00:02:35.550 --> 00:02:36.870
'cause I want you to see this.

53
00:02:36.870 --> 00:02:40.350
This is kind of cool and interesting at the same time.

54
00:02:40.350 --> 00:02:43.320
So notice that it seems that our Home link here

55
00:02:43.320 --> 00:02:44.207
is kind of confused.

56
00:02:44.207 --> 00:02:46.010
If you go to Home,

57
00:02:46.010 --> 00:02:48.510
it is the active link

58
00:02:48.510 --> 00:02:50.380
which is what you're expect.

59
00:02:50.380 --> 00:02:52.720
But the Home link seems kind of confused

60
00:02:52.720 --> 00:02:54.600
because when you go to the About page,

61
00:02:54.600 --> 00:02:56.000
the About page is working

62
00:02:56.000 --> 00:02:58.790
or the About link is and so is the Blog link

63
00:02:58.790 --> 00:03:03.790
but the Home link is still showing the same active state.

64
00:03:04.050 --> 00:03:05.170
Why is that?

65
00:03:05.170 --> 00:03:09.410
Well, because technically, if you analyze the URL bar,

66
00:03:09.410 --> 00:03:11.890
the way that the active class works

67
00:03:11.890 --> 00:03:16.810
is it only tries to match one of the element by default.

68
00:03:16.810 --> 00:03:19.400
So for example, if it sees

69
00:03:19.400 --> 00:03:23.810
that it is on the route of just slash

70
00:03:23.810 --> 00:03:26.120
or where it doesn't have anything at all,

71
00:03:26.120 --> 00:03:29.530
it's going to assume it's on the Home page route

72
00:03:29.530 --> 00:03:32.070
and so it's gonna make that the active class.

73
00:03:32.070 --> 00:03:35.430
However, if it goes to the Blog page or the About page,

74
00:03:35.430 --> 00:03:39.610
notice how we're at localhost:8080/

75
00:03:39.610 --> 00:03:42.110
and then what the activeClassName does

76
00:03:42.110 --> 00:03:44.650
is it actually ignore everything

77
00:03:44.650 --> 00:03:46.500
after it finds that slash.

78
00:03:46.500 --> 00:03:48.860
And it just says okay, I guess we're on the Home page.

79
00:03:48.860 --> 00:03:50.730
And the reason for that

80
00:03:50.730 --> 00:03:53.270
is it's actually a important reason

81
00:03:53.270 --> 00:03:56.480
because say that you're on the Blog page here

82
00:03:56.480 --> 00:04:00.640
and you want this Blog page link to be active

83
00:04:00.640 --> 00:04:03.220
even if you're not technically just on Blog.

84
00:04:03.220 --> 00:04:07.030
Maybe you're on blog/123

85
00:04:07.030 --> 00:04:09.190
and you're actually on and you're looking

86
00:04:09.190 --> 00:04:11.770
and reading one of the blog pages,

87
00:04:11.770 --> 00:04:15.630
you'd still want this to show up as the active class.

88
00:04:15.630 --> 00:04:18.830
Well, with Home, that's kind of confusing.

89
00:04:18.830 --> 00:04:22.660
So what you can do is pass an extra prop to Home.

90
00:04:22.660 --> 00:04:24.940
So open up Visual Studio Code

91
00:04:24.940 --> 00:04:27.380
and we're not gonna do this to the other NavLinks

92
00:04:27.380 --> 00:04:30.580
but to Home, what we can do is pass in the prop

93
00:04:30.580 --> 00:04:33.410
of exact and remember,

94
00:04:33.410 --> 00:04:37.900
this is the same as saying exact equals curly brackets true

95
00:04:37.900 --> 00:04:40.310
but any time you have a Boolean value

96
00:04:40.310 --> 00:04:41.780
that you want to be true,

97
00:04:41.780 --> 00:04:44.500
you can just pass in exact, hit Save

98
00:04:44.500 --> 00:04:45.860
and now come back

99
00:04:45.860 --> 00:04:48.970
and you'll see that that is no longer showing up.

100
00:04:48.970 --> 00:04:50.940
So what the exact prop does

101
00:04:50.940 --> 00:04:53.600
is it says that is only going to work

102
00:04:53.600 --> 00:04:57.440
if you are on that page exactly.

103
00:04:57.440 --> 00:05:00.500
So if you are on localhost:8080

104
00:05:00.500 --> 00:05:03.100
and there's no extension, there's no other path,

105
00:05:03.100 --> 00:05:06.090
then Home is gonna be considered the active page.

106
00:05:06.090 --> 00:05:07.520
When you're on the About page,

107
00:05:07.520 --> 00:05:09.580
you're only gonna be showing About.

108
00:05:09.580 --> 00:05:11.790
You're not going to be looking at Home.

109
00:05:11.790 --> 00:05:13.080
Same thing with Blog.

110
00:05:13.080 --> 00:05:17.670
So that is how you can use the NavLink component

111
00:05:17.670 --> 00:05:20.753
in React Router to have custom styles.

Resources

• Source code