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

Descendant and Nested Routing

9:37 with Laura Coronel

You can render a Route component anywhere you need one, including deep within the component tree of another Route component. OR you can nest Route components inside one another.

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

    The directory still needs to display the list of courses inside 0:00
    the courses component. 0:04
    In the app, when you click over to Courses you should be able to click 0:06
    on a sub navigation link and see the list of courses for that topic, like this. 0:11
    We need to create the route for the HTML, 0:18
    CSS, and JavaScript Course List components. 0:21
    In React Router, you can render route components anywhere in your app. 0:24
    Since we want the HTML, CSS, and JavaScript course list to appear 0:30
    in the courses component Let's create the routes in Courses.js. 0:36
    The routes we'll create here are called descendant routes. 0:42
    Descendant routes are routes that are not written in the main 0:46
    routes component but elsewhere in the component tree. 0:51
    These routes weren't the same as any other routes 0:55
    except it automatically builds on the path of the parent route. 0:59
    In our case the path of the parent route is courses. 1:04
    In the file Courses.js, let's import the HTML, CSS, 1:09
    and JavaScript components located inside the courses directory. 1:14
    Import HTML from ./courses/ HTML. 1:21
    Import CSS from ./courses/CSS 1:29
    And import JavaScript from ./courses//JavaScript. 1:37
    Now the courses heading and sub navigation needs to be present at all times, 1:44
    just above the HTML, CSS, and JavaScript components were rendering. 1:50
    So to render the components here inside the courses component, 1:56
    we'll first need to import the routes and route components from React Router DOM. 2:02
    Below the sub navigation, we'll add the routes tag and 2:09
    nest three routes, one for each topic. 2:13
    We'll add the route component and pass it the path and element prop. 2:17
    We want the HTML component to render when the URL is /courses/HTML. 2:22
    So in element, pass the HTML component tag. 2:30
    Now, like I said earlier, this is a descendant route, so 2:36
    its path is built off of its parent route path. 2:41
    Since the parent route path is courses, 2:45
    we just need to pass HTML to our route tag. 2:49
    And this route will render the HTML component 2:54
    when the URL matches courses/HTML. 2:59
    Let's copy this route tag twice. 3:04
    When the URL is /courses/CSS, 3:07
    this route will render the CSS component. 3:11
    We'll render the JavaScript component when the URL is /courses/JavaScript. 3:16
    Next, to link the route let's import the Nav link 3:26
    component at the top of Courses.js, and 3:31
    replace the a tags in the sub navigation with Navlink components. 3:34
    We'll first highlight the opening a tag and href. 3:40
    Then use a shortcut cmd+ Shift + L to enter NavLink to. 3:45
    Now let's select the closing a tags and use our shortcut again to enter NavLink. 3:51
    Now let's have the NavLink component point to the courses/html, 3:58
    Courses/CSS, and courses/JavaScript URL paths. 4:07
    When NavLinks are nested in a route, 4:16
    we can take advantage of passing a relative link to the to prop. 4:18
    Relative links are links that don't start with a forward slash. 4:23
    Instead, they will inherit the closest route in 4:29
    which they are rendered, in our case, /courses. 4:33
    When your app gets bigger, using relative links makes it easy to 4:38
    link into deeper URLs without having to know the entire path. 4:43
    So we can remove the /courses/ from the to props. 4:48
    In the browser, when you click over to courses, 4:57
    then HTML, we only see the header. 5:01
    Let's investigate this, in the console we see two warnings. 5:04
    The first warning says you render descendant routes at /courses, 5:09
    but the parent route path has no trailing *. 5:16
    This means, if you navigate deeper, the parent won't match anymore, 5:21
    and therefore, the child routes will never render. 5:26
    Awesome, this is a very helpful warning. 5:29
    It's telling us we need to add a trailing asterik in the parent route path. 5:33
    So in the file App.js, let's add the asterisk like the warning asked us to. 5:39
    In react, the asterisk is a wild-card character. 5:47
    Whenever a URL starts with courses, forward slash, 5:51
    routes will match the URL with this route and render the courses component. 5:56
    We can see this in action. 6:02
    When we change the URL to courses slash Hello, 6:04
    we can see that courses component is rendered. 6:07
    We can also see the courses component being rendered in React dev tools. 6:11
    Now when you click HTML, you will see the list of HTML courses. 6:17
    Click CSS, and you'll see the CSS courses. 6:23
    And clicking JavaScript, displays the JavaScript courses. 6:27
    And notice how the sub navigation link remains active when 6:32
    its corresponding path is the active path in the URL. 6:36
    Another way we could have done this, 6:41
    is with nested route instead of descended route. 6:43
    As the name implies, routes can be nested inside one another. 6:47
    So in the file App.js will nest the HTML, CSS, and 6:52
    JavaScript route in the parent route path. 6:57
    So first, we'll change the self-closing route tag to an open and 7:01
    closing route tag. 7:06
    We'll cut the route tags from Courses.js and delete the routes tag. 7:07
    In App.js, I'll paste the route tags inside the opening and closing route tag. 7:16
    And we can use the shortcut Option+Shift+F in Visual Studio code to 7:24
    fix our formatting for us. 7:28
    Now let's cut out the import statements for the HTML, CSS, and 7:30
    JavaScript components. 7:35
    We'll remove the routes and route from the import statement since 7:38
    it's no longer being used in the courses component. 7:43
    In the file App.js, we'll paste the import statements here and 7:47
    update the file path by adding components to the front of each of them. 7:52
    Rendering nested routes works differently than rendering descendant routes. 8:00
    In decendant routes, we added the /*, to the end of the parent route path. 8:05
    With nested routes, the /* is not needed, 8:13
    because the route tags are all inside the main routes tag. 8:17
    But now we need to indicate where in the parent component the nested 8:24
    route should be rendered. 8:29
    And that's where react routers outlet component comes in. 8:31
    The outlet component is placed inside the parent component, 8:36
    indicating where exactly the nested routes should render. 8:41
    So in our case, 8:46
    we want the list of courses to render under the course navigation buttons. 8:47
    But first, let's import outlet at the top of Courses.js. 8:53
    And place the outlet tag where our routes tag or previously located. 9:00
    And we'll give this a save. 9:06
    In the browser, our app is working just like we expected. 9:09
    You can use either descendant routes or 9:13
    nested routes when you need to render a child component. 9:16
    I like to use nested routes so that all my route tags are in one file. 9:21
    In the next video, I'll cover why you see a blank Courses page when 9:27
    you first navigate to /courses and how to fix this. 9:32

    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