I'm thrilled to have you here today because we're about to embark on an exciting adventure into the captivating world of React Router nested routes. Trust me, I've been in your shoes, and understanding nested routes can be quite a puzzle. But fear not, because I'll be your friendly guide, leading you through this journey step by step. By the end of this article, you'll have a solid grasp of nested routes and how they can take your React applications to the next level. We'll explore the fundamental concepts, delve into React Router v6, and even learn about the powerful feature. useOutletContext So, buckle up and get ready for an enlightening exploration of React Router nested routes! Table of Contents: What are nested routes? React Router nested routes. Exploring useOutletContext Are you excited? I sure am 😀 Let's dive right in and unravel the wonders of nested routes in React together! What are nested routes? In some websites, it's quite common to visit the about page by going to . When you land there, you'll see a cool cover image and the title About. And guess what? You'll have the option to choose one of two sub-pages: /about About us, which can be found at /about/us/ About the Team, located at /about/team/ Isn't it great? You can explore more about the website and its awesome team through these sub-pages! The About us page will display the same content as the page, but it will also include an additional section called About us below. Similarly, the About the Team page will show the same content as the page, but it will have an extra section called About the Team below. /about /about This demonstrates nested routes, as the page combines two routes into one. It includes the content from both the route and the route. /about/us /about /about/us React Router nested routes To make nested routes work in React Router, follow these three steps: Start by nesting new definitions inside an existing element. <Route /> <Route /> Import and use an component inside the route that will have nested routes. <Outlet /> Ensure you have links pointing to these routes so you can view and test them. Let's begin with an example where we have an component that renders on the path. <About /> /about import {BrowserRouter, Routes, Route} from "react-router-dom";

function About() {
  return <>
        <h1>About</h1>

    </>;
}

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/about/" element={<About />}>
                </Route>
            </Routes>
        </BrowserRouter>
    );
} We aim to enhance the functionality of the component by enabling it to render nested routes. Essentially, whenever the path begins with , we want the component to render along with its corresponding child components. This way, we can consistently display the heading on sub-pages like and . <About /> /about <h1>About</h1> /about/us /about/team Step 1: Let's start by defining nested definitions <Route /> First, let's define the two nested routes under . We'll create a and a . Remember, the paths are relative because we're nesting them inside . These two components will be children of the So, the structure will look like this: /about <Route path="us" /> <Route path="team" /> <Route path="/about/" /> <Route /> <Route path="/about" />. <Route path="/about/" element={<About />}>
    {/* about/us */}
    <Route path="us" element={<h2>About us</h2>}>
    </Route>
    {/* about/team */}
    <Route path="team" element={<h2>About the Team</h2>}>
    </Route>
</Route> I've added some comments to help you out. So, when you have the path attribute set to nested inside the path attribute set to , it creates a final path for that route as . Similarly, if you have the path attribute set to , it will become . us /about/ /about/us team /about/team Start the nested routes without using a character. Otherwise, you'll need to repeat the path. So, valid paths are and . However, I recommend the first approach. / /about us /about/us 2. Use an <Outlet /> To make sure the nested routes are displayed, we'll need to tell the component how to render them. First, import the component from and use it within the component. This will determine the specific location in the JSX where the nested routes will be shown. <About /> Outlet react-router-dom <About /> import {BrowserRouter, Routes, Route, Outlet} from "react-router-dom";

function About() {
  return <>
        <h1>About</h1>

        {/* Render nested routes for /about/... here */}
        <Outlet />
    </>;
}

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/about/" element={<About />}>
                    {/* about/us */}
                    <Route path="us" element={<h2>About us</h2>}>
                    </Route>
                    {/* about/team */}
                    <Route path="team" element={<h2>About the Team</h2>}>
                </Route>
            </Route>
          </Routes>
        </BrowserRouter>
    );
} If you put the before the , then the content of the nested routes like or will be displayed before the . <Outlet /> <h1>About</h1> <h2>About us</h2> <h2>About the Team</h2> <h1> 3. Add elements <Link /> Finally, let's add the elements so that we can easily view and test these nested routes. <Link /> import {BrowserRouter, Routes, Route, Outlet, Link} from "react-router-dom";

function About() {
  return <>
      {/* Content always rendered when the URL starts with /about */}
      <h1>About</h1>
      <Link to="us">About us</Link> | 
      <Link to="team">About the team</Link>

      <Outlet />
    </>;
}

function App() {
    return (
        <BrowserRouter>
          <Routes>
            <Route path="/about/" element={<About />}>
                {/* about/us */}
                <Route path="us" element={<h2>About us</h2>}>
                </Route>
                {/* about/team */}
                <Route path="team" element={<h2>About the Team</h2>}>
                </Route>
            </Route>
            </Route>
          </Routes>
        </BrowserRouter>
    );
} useOutletContext Sometimes, we need to pass data to the components that are rendered by the . For now, let's consider a basic example where we have a variable called that we want to make accessible to any component rendered under the . Outlet data <Outlet /> Instead of this basic example, If you want me to write a project based article, on how to do this let me know in the comments. function About() {
    // we want to make this available to the <Outlet /> sub-components
    const data = {
        someValue: 123
    };

    return <>
        {/* Content always rendered when the URL starts with /about */}
        <h1>About</h1>
        <Link to="us">About us</Link> | 
        <Link to="team">About the team</Link>

        <Outlet />
    </>;
} To achieve that, you can utilize the context attribute on the component, which will automatically generate a context for you. This is a commonly used feature, and the React Router team has incorporated it directly into the library. <Outlet /> function About() {
    // we want to make this available to the <Outlet /> sub-components
    const data = {
        someValue: 123
    };

    return <>
        {/* Content always rendered when the URL starts with /about */}
        <h1>About</h1>
        <Link to="us">About us</Link> | 
        <Link to="team">About the team</Link>

        // pass it to Outlet as a context
        <Outlet context={data} />
    </>;
} This special context attribute is exclusive to the component. It automatically creates a context for us, which can be accessed by the children of . All we need to do is use it. <Outlet /> <Outlet /> hook useOutletContext The hook is a handy tool that helps us in various components that need to be rendered under the . Let's take the component as an example. useOutletContext <Outlet /> AboutUs import {useOutletContext} from "react-router-dom";

function AboutUs() {
    const context = useOutletContext();
    console.log(context); // {someValue: 123}
    console.log(context.someValue); // 123

    // ...
} You Nailed it Hacker 🥳 Congratulations on completing this captivating journey into the world of nested routes. I encourage you to apply what you've learned and experiment with nested routes in your own projects. Thank you for joining me on this enlightening exploration of nested routes in react. Happy coding, and may your React applications flourish with enhanced navigation and seamless user journeys!

Too Long; Didn't Read

Making security fun one episode at a time

Mastering Nested Routes for Robust Web Applications (Using React Router V6)

Too Long; Didn't Read

Sojin Samuel

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Mastering Nested Routes for Robust Web Applications (Using React Router V6)

Too Long; Didn't Read

Sojin Samuel

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES