🚀 10x your project workflow with Reusable Layouts in React Router V6 with createBrowserRouter and Nested Routes | aweai

Back to newsNews

🚀 10x your project workflow with Reusable Layouts in React Router V6 with createBrowserRouter and Nested Routes

React

🚀 10x your project workflow with Reusable Layouts in React Router V6 with createBrowserRouter and Nested Routes

By codeek

devto-react12h ago · Jul 19, 20264 min read

Image courtesy of devto-react

If you've ever copied the same Navbar, Sidebar, or Footer across multiple pages, you're doing extra work. React Router's createBrowserRouter, children, and Outlet let you create reusable layouts that automatically wrap multiple pages. Instead of repeating components everywhere, you define them once and let nested routes handle the rest. In this guide, we'll build a clean routing structure that scales as your application grows. Imagine your application has the following pages: Home Login Register

If you've ever copied the same Navbar, Sidebar, or Footer across multiple pages, you're doing extra work.

React Router's createBrowserRouter, children, and Outlet let you create reusable layouts that automatically wrap multiple pages. Instead of repeating components everywhere, you define them once and let nested routes handle the rest.

In this guide, we'll build a clean routing structure that scales as your application grows.

Why Use Nested Routes?

Imagine your application has the following pages:

Home
Login
Register
Dashboard
Profile
Settings

The authentication pages shouldn't display the dashboard sidebar.

The dashboard pages, however, should all share:

Navigation
Sidebar
Footer

Instead of repeating these components inside every page, we'll create a reusable layout.

React Router supports this through nested routing using the children property and renders child pages through the Outlet component.

Project Structure

src
│
├── layouts
│   ├── MainLayout.jsx
│   └── DashboardLayout.jsx
│
├── pages
│   ├── Home.jsx
│   ├── Login.jsx
│   ├── Register.jsx
│   ├── Dashboard.jsx
│   ├── Profile.jsx
│   └── Settings.jsx
│
├── routes
│   └── router.jsx
│
└── main.jsx

Enter fullscreen mode Exit fullscreen mode

Step 1 — Install React Router

npm install react-router-dom

Enter fullscreen mode Exit fullscreen mode

Step 2 — Create the Router

React Router recommends creating your router once using createBrowserRouter and passing it to RouterProvider.

import { createBrowserRouter } from "react-router-dom";
export const router = createBrowserRouter([
  {
    path: "/",
    element: <MainLayout />,
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: "login",
        element: <Login />,
      },
      {
        path: "register",
        element: <Register />,
      },
    ],
  },
]);

Enter fullscreen mode Exit fullscreen mode

Step 3 — Create a Layout Component

Instead of rendering pages directly, create a reusable layout.

import { Outlet } from "react-router-dom";
function MainLayout() {
  return (
    <>
      <Navbar />
      <main>
        <Outlet />
      </main>
      <Footer />
    </>
  );
}
export default MainLayout;

Enter fullscreen mode Exit fullscreen mode

The magic happens with Outlet.

Whenever one of the child routes matches, React Router renders it exactly where the Outlet is placed.

Step 4 — Create a Dashboard Layout

Now let's create a completely different layout.

{
  path: "/dashboard",
  element: <DashboardLayout />,
  children: [
    {
      index: true,
      element: <Dashboard />,
    },
    {
      path: "profile",
      element: <Profile />,
    },
    {
      path: "settings",
      element: <Settings />,
    },
  ],
}

Enter fullscreen mode Exit fullscreen mode

Dashboard layout:

import { Outlet } from "react-router-dom";
function DashboardLayout() {
  return (
    <div className="dashboard">
      <Sidebar />
      <section className="content">
        <Outlet />
      </section>
    </div>
  );
}
export default DashboardLayout;

Enter fullscreen mode Exit fullscreen mode

Every dashboard page now automatically shares the sidebar.

No duplicated code.

Step 5 — Wrap Everything with `RouterProvider`

import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import { router } from "./routes/router";
ReactDOM.createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);

Enter fullscreen mode Exit fullscreen mode

Final Route Structure

/
├── Home
├── Login
├── Register
/dashboard
├── Dashboard
├── Profile
└── Settings

Enter fullscreen mode Exit fullscreen mode

Why This Pattern is Better

✅ No duplicated Navbar or Sidebar
✅ Cleaner project structure
✅ Easier to maintain
✅ Better scalability
✅ Perfect for authentication layouts
✅ Great for admin dashboards

Key Takeaways

Use createBrowserRouter to define your application's routes.
Organize related pages with the children property.
Wrap shared UI inside layout components.
Render nested pages using Outlet.
Keep routing scalable and easy to maintain as your application grows.

🎥 Prefer Learning by Watching?

This article covers the concepts step by step, but if you'd like to see the complete implementation in action—including project setup, nested layouts, authentication routing, and best practices—check out Episode 6 of my React Authentication & Authorization series.

📺 Watch here:

https://www.youtube.com/watch?v=n0evocfZls0&list=PL_02r0p8Ku_5-h4teExCf6egkktSQblC4&index=6

The full playlist walks through building a modern authentication system with React Router, protected routes, JWT authentication, authorization, and much more from scratch.

Happy coding! 🚀