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

Navigating between Routes

2:31 with Laura Coronel

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

VS Code Shortcuts Used

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up