DEV Community

codeek
codeek

Posted on

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

#react #frontend #frontendchallenge

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! 🚀

Top comments (0)