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, Nesting and Redirecting Routes Recap

2:10 with Laura Coronel

Let’s go over the key concepts you learned in this stage.

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

    In this stage you learned the most important parts of React Router. 0:00
    We made our app interactive by incorporating React Router's Link 0:04
    component in our main navigation bar. 0:08
    We then swap the Link tags for 0:10
    the NavLink component which automatically adds the active class to the link. 0:12
    Remember, you can customize the class name and style by providing NavLink, 0:18
    the class name, and style prop. 0:22
    Then we focused on getting the sub navigation to display a list of courses 0:25
    when a user clicks a course link. 0:29
    We started by creating descendant routes to render the list of courses in 0:32
    the Courses component. 0:36
    While creating these routes, we learned that we can pass relative paths 0:38
    to React Router's Route, Link, and NavLink components. 0:43
    Remember, when you have descendant routes, 0:47
    you must add the forward /* to the end of the parent route path. 0:50
    Otherwise, the descendant routes won't render to the page. 0:55
    We then turned our descendant routes into nested routes, so 0:59
    that all our Routes are in one location, the main App component. 1:03
    With all the Routes in one file, 1:08
    we needed a way to let React Router know where to render the list of courses, and 1:10
    that's where React Router's Outlet component came in. 1:14
    The Outlet component allows nested UI to show up when the child route renders. 1:18
    We then had an issue where the list of courses didn't render on the page when 1:24
    the user navigates to the Courses tab. 1:28
    We fixed that by using the Navigate component to redirect users to 1:31
    courses/html when they visited the courses URL. 1:36
    We created an index route which called the Navigate component when the route 1:41
    match the courses URL. 1:45
    Lastly, we made sure to pass navigate the replace prop to fix the loop the user 1:48
    experiences as they try to navigate back through the history stack. 1:52
    At this point, you know enough about React Router to begin using it and 1:57
    your React apps, well done. 2:01
    All your routes are in place and users can easily navigate through the directory app. 2:04

    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