`<BrowserRouter>`

Type declaration

declare function BrowserRouter(  props: BrowserRouterProps ): React.ReactElement;  interface BrowserRouterProps {  basename?: string;  children?: React.ReactNode;  future?: FutureConfig;  window?: Window; }

A <BrowserRouter> stores the current location in the browser's address bar using clean URLs and navigates using the browser's built-in history stack.

import * as React from "react"; import { createRoot } from "react-dom/client"; import { BrowserRouter } from "react-router-dom";  const root = createRoot(document.getElementById("root"));  root.render(  <BrowserRouter>  {/* The rest of your app goes here */}  </BrowserRouter> );

`basename`

Configure your application to run underneath a specific basename in the URL:

function App() {  return (  <BrowserRouter basename="/app">  <Routes>  <Route path="/" /> {/* 👈 Renders at /app/ */}  </Routes>  </BrowserRouter>  ); }

`future`

An optional set of Future Flags to enable. We recommend opting into newly released future flags sooner rather than later to ease your eventual migration to v7.

function App() {  return (  <BrowserRouter future={{ v7_startTransition: true }}>  <Routes>{/*...*/}</Routes>  </BrowserRouter>  ); }

`window`

BrowserRouter defaults to using the current document's defaultView, but it may also be used to track changes to another window's URL, in an <iframe>, for example.