Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, we'll use React Router's <Link> component to navigate between our routes.
Resources
[MUSIC]
0:00
In the previous stage,
0:04
you learned the basics of creating
routes with React Router, and
0:05
some of the benefits of its simple,
declarative approach to writing routes.
0:08
And by declarative,
0:12
I mean that React lets you write
code that describes the end result.
0:13
For instance, the route component
matches a URL's path and
0:16
loads a component, without you having
to define how it should happen.
0:19
In this stage,
I'll introduce you to clever and
0:23
useful writing features React Router
provides to navigate between routes,
0:25
display active navigation links,
even redirect routes and more.
0:29
First up, no single page app is
complete without navigation.
0:33
That links users to the different
sections of your app.
0:36
It's what users usually
interact with most.
0:39
Up until now we've navigated the directory
app by manually changing the URL in
0:41
the address bar.
0:45
But users need to move through the app
by clicking the links in the main menu.
0:46
So now,
let's create the main navigation for
0:51
our application using React Router's
link and nav link components.
0:53
Currently, the app uses anchor elements
to display the navigation links.
0:57
And clicking on a link doesn't
take you anywhere yet,
1:02
because they're just placeholder links.
1:04
Well with React Router,
1:07
you don't use regular anchor tags
to link to the routes in your app.
1:08
Instead, it provides
an intelligent solution for
1:12
navigating between routes with link.
1:13
The link component is one of
React Router's core writing components.
1:16
To begin using link, we need to import it,
so at the top of header.js,
1:19
let's import Link from react-router-dom.
1:23
Next, we'll need to replace
the a tags in the nav with link tags.
1:30
So to link the home route,
lets replace the opening and
1:34
closing a tags with link tags.
1:37
And replace the href attribute
with the to attribute.
1:40
Now the to attribute is similar to
the href attribute in anchor elements.
1:46
It points the link component to a route
by changing the path in the URL.
1:50
So the value for to should match
the path defined for the route.
1:54
So for the home link,
it should be a forward slash.
2:00
All right, so let's test this.
2:04
Over in the browser, clicking the Home
link, loads the Home component inside app.
2:06
Great, so now let's define
the rest of our route links.
2:11
In Atom, I can use the shortcut Cmd+D
to select all opening a tags and
2:14
href attributes at once, and change
them to link tags with two attributes.
2:21
I'll also change the closing a tags
by selecting them all at once and
2:28
replacing them with closing link tags.
2:32
Now let's not forget to include the paths
for About, Teachers, and Courses.
2:39
And it looks like our navigation
is now hooked up to our routes.
2:51
And if you inspect the nav
in your dev tools,
2:56
you'll see that React renders fully
accessible anchor elements for each link.
2:59
And it includes the proper
paths in the href attributes.
3:04
The navigation is working,
but when you click on a link,
3:09
the link doesn't remain active.
3:12
We'll address this in the next video.
3:15
You need to sign up for Treehouse in order to download course files.
Sign up