Modern React Router Setup with createBrowserRouter (v6+ Guide)

React Router v6+ introduces a streamlined approach to routing that replaces the traditional BrowserRouter pattern with createBrowserRouter. This modern method not only simplifies route configuration but also unlocks advanced features like nested layouts, data loaders, and protected routes—essential for building scalable React applications.

Why Migrate to createBrowserRouter?

The legacy BrowserRouter configuration often leads to sprawling route definitions embedded within components, making maintenance difficult as projects grow. In contrast, createBrowserRouter centralizes route configuration in a dedicated file, such as src/routes/index.jsx, enabling better organization and scalability. This pattern aligns with React Router’s recommendation to create the router outside the React tree and pass it to a <RouterProvider>, which renders the application’s routes dynamically.

Key advantages of this approach include:

• Cleaner and more maintainable route definitions
• Built-in support for nested layouts using <Outlet /> components
• Native integration with data APIs via loader and action functions
• Simplified implementation of authentication and protected routes
• Enhanced performance through lazy-loaded route modules

Step-by-Step Setup Guide

1. Install React Router

Begin by installing the latest version of React Router in your project:

npm install react-router-dom

A well-structured project directory is equally important. Consider organizing your files as follows to support modular development:

src/
├── layouts/
│   └── MainLayout.jsx
├── pages/
│   ├── Home.jsx
│   ├── Products.jsx
│   ├── ProductDetails.jsx
│   ├── Cart.jsx
│   └── NotFound.jsx
├── routes/
│   └── index.jsx
├── App.jsx
└── main.jsx

This structure keeps route-related logic separate from page components, making it easier to manage as your application expands.

2. Define Routes in a Dedicated File

Create a new file at src/routes/index.jsx and define your routes using the createBrowserRouter function. This file acts as the single source of truth for all application routes:

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 MainLayout component serves as a wrapper for shared UI elements like headers and footers, while the <Outlet /> component within it renders the current route’s content dynamically.

3. Integrate the Router in Your Application

Update your main.jsx file to render the application using the <RouterProvider> component, which connects the router to the React tree:

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>
);

This setup ensures that route changes trigger seamless UI updates without full page reloads, enhancing both performance and user experience.

Building a MainLayout Component

The MainLayout component acts as a container for shared layout elements and nested routes. Here’s a basic example:

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

const MainLayout = () => {
  return (
    <>
      <header>Navbar</header>
      <main>
        <Outlet />
      </main>
      <footer>Footer</footer>
    </>
  );
};

export default MainLayout;

The <Outlet /> component dynamically renders the child route’s content, allowing for nested route structures without additional complexity.

What’s Next for Your React Router Project?

Once your router is configured, you can extend its functionality to support advanced use cases:

• Protected routes for authenticated users
• Data loaders to fetch information before rendering routes
• Error boundaries to handle route failures gracefully
• Lazy loading to improve performance by loading routes on demand
• Dynamic route parameters for flexible URL structures

For developers looking to apply these concepts in a real-world scenario, a comprehensive tutorial series demonstrates how to build a production-ready ecommerce application using React Router, Chakra UI, and Zustand. The series covers everything from route setup to payment integration and best practices for deploying React applications.

Adopting the createBrowserRouter pattern today will set your project up for long-term success, ensuring maintainability, scalability, and a smoother development experience as your application evolves.