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

Going Further with Routing Recap

2:09 with Laura Coronel

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

    Related Discussions

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

    Sign up

    We've gone over quite a bit in this stage. 0:00
    We created a 404 like route by passing * to the Route path property. 0:03
    So now, whenever the user misspells a URL, or 0:08
    navigates to a URL with no route, the app renders the NotFound component. 0:12
    To make our app more maintainable and efficient, 0:17
    we refactored parts of our code. 0:20
    Since the HTML, CSS and JavaScript components all shared the same behavior, 0:22
    we created a CourseContainer component that accepts the course data as a prop and 0:28
    renders them. 0:34
    We then learned how to declare dynamic routes using special URL parameters. 0:35
    The dynamic segment of the path prop contains a colon to indicate a URL 0:41
    parameter, and you can provide multiple parameters by separating them 0:45
    with either a forward slash or a dash. 0:50
    Our dynamic segment creates two parameters, topic and name. 0:52
    So whenever users navigate to our dynamic route, we're able to access 0:57
    those parameters using the useParams hook, and render them on the page. 1:02
    Lastly, we learned how to navigate routes programmatically. 1:06
    We created a form element that accepts a teacher's name and topic. 1:10
    We access the forms values using the useRef hook, and 1:15
    created a URL path to navigate to when the user submits the form. 1:19
    To handle the navigation, we imported React Router's useNavigate 1:24
    hook to navigate the user to the desired path. 1:29
    Congrats. 1:32
    You just learned a valuable new skill commonly used in React development. 1:33
    React and the tools around it are constantly evolving, 1:38
    so be sure to check the resources posted in the Teacher's Notes to learn about 1:41
    the latest in React and React Router. 1:46
    I've also included links to Treehouse courses that will teach you advanced React 1:48
    concepts and useful tools for your projects. 1:53
    Remember, we're here to help. 1:56
    If you have questions about anything covered in this course, 1:58
    feel free to reach out to the Treehouse staff or other students in the community. 2:01
    Thanks everyone, and happy coding. 2:06

    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