Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

React Router v6 Basics

Well done!

You have completed React Router v6 Basics!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Navigating between Routes

2:31 with Laura Coronel

In this video, we'll use React Router's Link component to navigate between our routes.

Currently, the app uses anchor elements to display the navigation links. 0:00
And clicking on the link doesn't take you anywhere yet 0:05
because they're just placeholder links. 0:08
Well, with React router, 0:11
you don't use regular anchor tags to link to routes in your app. 0:13
Instead, it provides an intelligent solution for 0:18
navigating between routes with Link. 0:21
The Link component is one of React Router's core routing components. 0:25
To begin using Link, we need to import it. 0:30
So at the top of Header.js, let's import Link from react-router-dom. 0:33
Next, we'll need to replace the a tags in the nav with Link tags. 0:42
To link the home route, let's replace the opening and 0:47
closing a tags with Link tags, and replace the href attribute with a to attribute. 0:52
Now, the to attribute is similar to the href attribute in anchor elements. 0:59
It points the Link component to a route by changing the path in the URL. 1:04
So the value for to should match the path defined for the route. 1:10
For the home link, it should be a forward slash. 1:14
All right, let's test this. 1:19
Over in the browser, 1:20
clicking the Home link loads the Home component inside app, great. 1:22
Now let's define the rest of our route links. 1:27
In Visual Studio code, I can use the shortcut Cmd+Shift+L 1:31
to select all the opening a tags and href attributes at once and 1:35
change them to Link tags with to attributes. 1:40
I'll also change the closing a tag by selecting them all at once 1:46
with Cmd+Shift+L and replacing them with the closing Link tags. 1:50
Now let's not forget to include the path for About, Teachers, and Courses. 1:57
Our navigation is now hooked up to our routes. 2:05
If you inspect the nav in the DevTools, 2:09
you'll see that React renders fully accessible anchor element for each link. 2:12
And it includes proper paths in the href attributes. 2:17
The navigation is working, but when you click on a link, 2:23
the link doesn't remain active. 2:26
We'll address this in the next video. 2:29