1
00:00:00,000 --> 00:00:04,563
[MUSIC]

2
00:00:04,563 --> 00:00:05,618
In the previous stage,

3
00:00:05,618 --> 00:00:08,521
you learned the basics of creating
routes with React Router, and

4
00:00:08,521 --> 00:00:12,190
some of the benefits of its simple,
declarative approach to writing routes.

5
00:00:12,190 --> 00:00:13,190
And by declarative,

6
00:00:13,190 --> 00:00:16,380
I mean that React lets you write
code that describes the end result.

7
00:00:16,380 --> 00:00:19,350
For instance, the route component
matches a URL's path and

8
00:00:19,350 --> 00:00:23,430
loads a component, without you having
to define how it should happen.

9
00:00:23,430 --> 00:00:25,890
In this stage,
I'll introduce you to clever and

10
00:00:25,890 --> 00:00:29,590
useful writing features React Router
provides to navigate between routes,

11
00:00:29,590 --> 00:00:33,440
display active navigation links,
even redirect routes and more.

12
00:00:33,440 --> 00:00:36,905
First up, no single page app is
complete without navigation.

13
00:00:36,905 --> 00:00:39,235
That links users to the different
sections of your app.

14
00:00:39,235 --> 00:00:41,645
It's what users usually
interact with most.

15
00:00:41,645 --> 00:00:45,877
Up until now we've navigated the directory
app by manually changing the URL in

16
00:00:45,877 --> 00:00:46,848
the address bar.

17
00:00:46,848 --> 00:00:51,075
But users need to move through the app
by clicking the links in the main menu.

18
00:00:51,075 --> 00:00:53,380
So now,
let's create the main navigation for

19
00:00:53,380 --> 00:00:56,879
our application using React Router's
link and nav link components.

20
00:00:57,960 --> 00:01:02,390
Currently, the app uses anchor elements
to display the navigation links.

21
00:01:02,390 --> 00:01:04,710
And clicking on a link doesn't
take you anywhere yet,

22
00:01:04,710 --> 00:01:07,120
because they're just placeholder links.

23
00:01:07,120 --> 00:01:08,270
Well with React Router,

24
00:01:08,270 --> 00:01:12,080
you don't use regular anchor tags
to link to the routes in your app.

25
00:01:12,080 --> 00:01:13,980
Instead, it provides
an intelligent solution for

26
00:01:13,980 --> 00:01:16,370
navigating between routes with link.

27
00:01:16,370 --> 00:01:19,690
The link component is one of
React Router's core writing components.

28
00:01:19,690 --> 00:01:23,964
To begin using link, we need to import it,
so at the top of header.js,

29
00:01:23,964 --> 00:01:26,834
let's import Link from react-router-dom.

30
00:01:30,064 --> 00:01:34,640
Next, we'll need to replace
the a tags in the nav with link tags.

31
00:01:34,640 --> 00:01:37,570
So to link the home route,
lets replace the opening and

32
00:01:37,570 --> 00:01:40,770
closing a tags with link tags.

33
00:01:40,770 --> 00:01:46,230
And replace the href attribute
with the to attribute.

34
00:01:46,230 --> 00:01:50,454
Now the to attribute is similar to
the href attribute in anchor elements.

35
00:01:50,454 --> 00:01:54,850
It points the link component to a route
by changing the path in the URL.

36
00:01:54,850 --> 00:02:00,000
So the value for to should match
the path defined for the route.

37
00:02:00,000 --> 00:02:02,749
So for the home link,
it should be a forward slash.

38
00:02:04,340 --> 00:02:06,020
All right, so let's test this.

39
00:02:06,020 --> 00:02:11,170
Over in the browser, clicking the Home
link, loads the Home component inside app.

40
00:02:11,170 --> 00:02:14,140
Great, so now let's define
the rest of our route links.

41
00:02:14,140 --> 00:02:21,510
In Atom, I can use the shortcut Cmd+D
to select all opening a tags and

42
00:02:21,510 --> 00:02:26,430
href attributes at once, and change
them to link tags with two attributes.

43
00:02:28,250 --> 00:02:32,730
I'll also change the closing a tags
by selecting them all at once and

44
00:02:32,730 --> 00:02:34,730
replacing them with closing link tags.

45
00:02:39,610 --> 00:02:43,567
Now let's not forget to include the paths
for About, Teachers, and Courses.

46
00:02:51,423 --> 00:02:55,040
And it looks like our navigation
is now hooked up to our routes.

47
00:02:56,440 --> 00:02:59,330
And if you inspect the nav
in your dev tools,

48
00:02:59,330 --> 00:03:04,090
you'll see that React renders fully
accessible anchor elements for each link.

49
00:03:04,090 --> 00:03:06,905
And it includes the proper
paths in the href attributes.

50
00:03:09,528 --> 00:03:12,731
The navigation is working,
but when you click on a link,

51
00:03:12,731 --> 00:03:15,090
the link doesn't remain active.

52
00:03:15,090 --> 00:03:16,480
We'll address this in the next video.