1. Architecture

createBrowserRouter	BrowserRouter
Part of React Router's data router API (v6.4+)	Traditional component-based router
Configured with a JavaScript object	Configured with JSX components
Better for data-driven apps (loaders, actions)	Simpler for basic routing

2. Key Differences

Feature	createBrowserRouter	BrowserRouter
Route Definition	Object configuration	JSX components
Data Loading	Built-in loader/action  APIs	Requires external state management
Scroll Restoration	Automatic (or via useScrollRestoration)	Manual implementation needed
Error Handling	Built-in error boundaries	Custom error handling
Code Splitting	Easier with lazy()	Requires more setup

3. Code Examples

createBrowserRouter (Data Router)

// 1. Create router configuration
const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    loader: () => fetchData(), // Built-in data loading
    children: [
      {
        path: "dashboard",
        element: <Dashboard />,
        errorElement: <ErrorPage /> // Built-in error boundary
      }
    ]
  }
]);

// 2. Use in app
function App() {
  return <RouterProvider router={router} />;
}

BrowserRouter (Component Router)

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

4. When to Use

• Use createBrowserRouter if:
• • You need data loading/actions (loader/action)
  • Want automatic scroll restoration
  • Need nested/relative routing
  • Want built-in error boundaries
  • Building a new app (recommended for v6.4+)
• Use BrowserRouter if:
• • Maintaining a legacy React Router v6 app
  • Need simple routing without data APIs
  • Not ready to adopt data router patterns

5. Key Advantages of createBrowserRouter

1. Data Integration
   Fetch data before components render:
   

   {
     path: "/users",
     element: <Users />,
     loader: async () => {
       const users = await fetchUsers();
       return users;
     }
   }

2. Actions
   Handle form submissions:
   

   {
     path: "/new-post",
     element: <NewPost />,
     action: async ({ request }) => {
       const formData = await request.formData();
       return createPost(formData);
     }
   }