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

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

What Is Routing?

2:27 with Laura Coronel

In single-page apps (SPAs), routing is responsible for loading and unloading content while matching the URL with the set of components being rendered. Routing should also keep track of browser history and link users to specific sections of your app.

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 course, you're going to create a single page app using React and 0:00
    the React Router library. 0:05
    Single page apps, or SPAs, 0:06
    are web applications that display on a single web page. 0:09
    The app's HTML, JavaScript, and CSS are loaded only once by the browser, 0:14
    and the content changes dynamically as the user interacts with the app. 0:20
    The app itself never reloads unless the user manually refreshes it. 0:26
    This provides a smoother browsing experience for users, 0:31
    like one found in desktops and mobile applications. 0:36
    In single page apps, routing is responsible for loading and 0:40
    unloading content, while matching the URL with a set of components being rendered. 0:44
    For instance, if a user clicks a Signup Link to visit a signup form in your app, 0:50
    the router finds the component that corresponds with the Signup URL, 0:56
    and loads of them onto the screen. 1:02
    A good, dependable routing solution should also keep 1:05
    track of the browser history to keep the UI in sync with the URL. 1:09
    That way, users can navigate the app using the browser's Back and Forward buttons. 1:14
    Routing should seamlessly link users to specific sections of your app. 1:20
    For example, if a user bookmarks or shares a URL in your app, 1:25
    the URL should always direct the user to the correct location. 1:30
    In other words, routing in single page apps should work in a way that's 1:35
    consistent with the navigation experience of regular multi page sites and apps. 1:39
    Otherwise, users may experience usability problems, like not knowing which part of 1:44
    the app they're visiting, or visiting a broken link. 1:49
    JavaScript frameworks like Angular and Ember come with built-in routing features. 1:52
    But as you've learned in the previous course, React is not a framework. 1:57
    It's a library concerned with rendering your UI. 2:01
    So the talented React community developed additional libraries and 2:04
    useful add-ons for building apps, React router being the most popular router. 2:09
    So coming up in this course, you'll learn how React Router fits into React's 2:14
    declarative and modular style of building user interfaces. 2:18
    And why it's one of the most intuitive and reliable routing solutions for React. 2:22

    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