Skip to main content
A declarative router using the browser History API for client-side routing. 
import { BrowserRouter, Routes, Route } from "react-router";

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

​
Type Declaration

export interface BrowserRouterProps {
  basename?: string;
  children?: React.ReactNode;
  unstable_useTransitions?: boolean;
  window?: Window;
}

export function BrowserRouter({
  basename,
  children,
  unstable_useTransitions,
  window,
}: BrowserRouterProps): React.ReactElement;

​
Props

​
basename
string
Application basename for when you can’t deploy to the root of the domain, but a subdirectory.
<BrowserRouter basename="/app">
  <Routes>
    <Route path="/" /> {/* Matches /app/ */}
    <Route path="dashboard" /> {/* Matches /app/dashboard */}
  </Routes>
</BrowserRouter>
​
children
React.ReactNode
Route components describing your route configuration. Typically contains a <Routes> component with nested <Route> elements.
<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="about" element={<About />} />
  </Routes>
</BrowserRouter>
​
unstable_useTransitions
boolean
Control whether router state updates are internally wrapped in React.startTransition.
  • When left undefined, all router state updates are wrapped in React.startTransition
  • When set to true, Link and Form navigations will be wrapped in React.startTransition and all router state updates are wrapped in React.startTransition
  • When set to false, the router will not leverage React.startTransition on any navigations or state changes.
For more information, please see the docs.
​
window
Window
Window object override. Defaults to the global window instance. Useful for testing or non-browser environments.

​
Example

import { BrowserRouter, Routes, Route, Link } from "react-router";

function App() {
  return (
    <BrowserRouter basename="/app">
      <nav>
        <Link to="/">Home</Link>
        <Link to="about">About</Link>
        <Link to="contact">Contact</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

​
Notes

You usually won’t render a <BrowserRouter> directly in modern apps. Instead, you’ll use a data router created with createBrowserRouter and render it with <RouterProvider>. See the picking a router guide for more information.

Build docs developers (and LLMs) love

Get started for freeTalk to us