How to Use BrowserRouter in React for Routing

Use BrowserRouter from react-router-dom to wrap your app and enable navigation between components without page reloads. Place your routes inside BrowserRouter using Routes and Route components to define paths and their matching components.

Syntax

BrowserRouter wraps your app to enable routing. Inside it, use Routes to group Route elements. Each Route has a path for the URL and an element for the component to show.

• BrowserRouter: Enables clean URLs and navigation without page reload.
• Routes: Container for route definitions.
• Route: Defines a URL path and the component to render.

jsx

import { BrowserRouter, Routes, Route } from 'react-router-dom';

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

Example

This example shows a simple React app with two pages: Home and About. Clicking links changes the URL and shows the right page without reloading.

jsx

import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

export default function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

Output

When running, the app shows navigation links 'Home | About'. Clicking 'Home' shows 'Home Page'. Clicking 'About' shows 'About Page'. The URL updates without page reload.

Common Pitfalls

• Not wrapping your app in BrowserRouter causes routing to fail.
• Using Switch instead of Routes is outdated; use Routes in React Router v6+.
• Forgetting to use element prop with JSX in Route (use element={}, not component={Component}).
• Using href instead of Link to causes full page reloads.

jsx

/* Wrong way: Missing BrowserRouter */
import { Routes, Route } from 'react-router-dom';

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

/* Right way: Wrap with BrowserRouter */
import { BrowserRouter, Routes, Route } from 'react-router-dom';

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

Quick Reference

Concept	Description	Example
BrowserRouter	Wraps your app to enable routing with clean URLs	...
Routes	Groups route definitions	...
Route	Defines a path and component to render	} />
Link	Navigates without page reload	About

Key Takeaways

Always wrap your app with BrowserRouter to enable routing.

Use Routes and Route components to define paths and their components.

Use Link for navigation to avoid full page reloads.

In React Router v6+, use the element prop with JSX in Route.

Avoid common mistakes like missing BrowserRouter or using outdated components.