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

React Router and React DevTools

3:24 with Laura Coronel

React Router is just a set of React components, which mean it’s components will display in React DevTools. Let’s add filters to our React DevTools to clean up our component tree to make debugging easier.

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 the previous video, I asked you to write the routes for 0:00
    the Teachers and Courses components. 0:04
    If you haven't created them yet, that's okay. 0:07
    We'll write them now. 0:10
    So first, let's import the Teachers and Courses components in App.js. 0:12
    We'll import Teachers from "./components/Teachers" and 0:21
    import Courses from "./components/Courses". 0:28
    Now we'll render these components into App at their respective paths using 0:35
    the Route component. 0:40
    So below the About route, I'll include a new route for 0:42
    teachers where path="teachers" and 0:47
    element to render will be the Teachers component. 0:50
    Below that include a new route for Courses. 0:55
    So I'll set path to courses and element to Courses. 0:58
    Now each route should render its assigned component when its path matches the URL. 1:07
    Let's try this out. 1:14
    Over in the browser, if I change the URL to /teachers, 1:15
    we see the Teachers component displaying the list of teachers. 1:20
    Change it to /courses, and we'll see the Courses component. 1:26
    Great, there aren't any courses listed here yet. 1:31
    You will be adding those later in this course. 1:35
    Remember earlier when I mentioned that React Router is 1:38
    just a set of React components? 1:42
    Well, if you open up the React DevTools in your browser, 1:45
    you'll see the React components React Router is currently using. 1:48
    As your app gets bigger, React DevTools will start getting cluttered 1:55
    with your components and the components created by React Router. 2:00
    To help keep my React DevTools clean, 2:04
    I like to add filters to only show the components I've built. 2:07
    Click the settings icon and make sure you're in the Components tab. 2:12
    The first filter is to hide any components with the word Route in it. 2:17
    Once I turn this filter on, 2:21
    all the components that match the filter are hidden. 2:23
    The next filter is to filter out the context components. 2:28
    You'll learn more about context later in the React curriculum. 2:33
    The last two filters won't filter out anything right now, but they will come 2:37
    in handy later in this course when we create links and nested routes. 2:42
    Now you don't have to hide the React Router components, 2:48
    I find that this helps me out when I'm debugging my own components or 2:52
    I just wanna focus on the components being rendered to the page. 2:57
    Also, React doesn't render any of the routing components to the actual DOM, 3:03
    they just manage what gets rendered. 3:08
    If I switch over to the Elements tab in Chrome Dev Tools, 3:11
    you will see just the HTML for our app. 3:16
    And it's displaying the mark up for the About component only. 3:19

    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