🚀React Router Setup Using createBrowserRouter (v6+ Pattern)

If you're still using BrowserRouter with Routes, it's time to move to the modern React Router pattern using createBrowserRouter.

This approach makes your application more scalable and prepares your project for advanced features like nested layouts, loaders, actions, and protected routes.

📦 Step 1: Install React Router

npm install react-router-dom



📁 Recommended Project Structure

src/

│

├── layouts/

│ └── MainLayout.jsx

│

├── pages/

│ ├── Home.jsx

│ ├── Products.jsx

│ ├── ProductDetails.jsx

│ ├── Cart.jsx

│ └── NotFound.jsx

│

├── routes/

│ └── index.jsx

│

├── App.jsx

└── main.jsx

Keeping your routes in a dedicated folder makes the application easier to maintain as it grows.

⚡ Step 2: Create Your Router

Create a file:

src/routes/index.jsx

import {

  createBrowserRouter,

} from "react-router-dom";



import MainLayout from "../layouts/MainLayout";



import Home from "../pages/Home";

import Products from "../pages/Products";

import ProductDetails from "../pages/ProductDetails";

import Cart from "../pages/Cart";

import NotFound from "../pages/NotFound";



export const router = createBrowserRouter([

  {

    path: "/",

    element: <MainLayout />,

    children: [

      {

        index: true,

        element: <Home />,

      },

      {

        path: "products",

        element: <Products />,

      },

      {

        path: "products/:id",

        element: <ProductDetails />,

      },

      {

        path: "cart",

        element: <Cart />,

      },

    ],

  },

  {

    path: "*",

    element: <NotFound />,

  },

]);

The router is created once and supplied to your application through RouterProvider, which is the recommended pattern for modern React Router applications.

🏗 Step 3: Configure main.jsx

import React from "react";

import ReactDOM from "react-dom/client";



import { RouterProvider } from "react-router-dom";



import { router } from "./routes";



ReactDOM.createRoot(document.getElementById("root")).render(

  <React.StrictMode>

    <RouterProvider router={router} />

  </React.StrictMode>

);

🏠 Step 4: Create a Layout

import { Outlet } from "react-router-dom";



const MainLayout = () => {

  return (

    <>

      <header>Navbar</header>



      <main>

        <Outlet />

      </main>



      <footer>Footer</footer>

    </>

  );

};



export default MainLayout;

is where nested child routes are rendered.

📍 Route Overview

💡 Why Use createBrowserRouter?

✅ Cleaner route configuration

✅ Supports nested layouts effortlessly

✅ Built for Data APIs (Loaders & Actions)

✅ Easier authentication and protected routes

✅ Better scalability for large React applications

React Router recommends creating the router outside the React tree and passing it to RouterProvider for modern applications.

🔥 What's Next?

Once your router is configured, you can easily add:

🔐 Protected Routes

👤 Authentication

📦 Nested Layouts

⚡ Loaders & Actions

❌ Error Pages

🔄 Lazy Loading

🌍 Dynamic Routes

🎥 Learn React Router the Practical Way

If you'd like to see everything built step by step—from installation to nested routes, protected routes, authentication, and real-world project structure—check out this tutorial:

📺 React Router Complete Setup

If you're aiming to build production-ready React applications instead of simple demos, this series is designed to help you understand how these technologies work together in a real-world ecommerce project.