BrowserRouter BrowserRouter Routing Container
Last updated: 2026-11-02
BrowserRouter BrowserRouter Routing Container
BrowserRouter is the routing container of react-router-dom: it watches the address and provides the current location to the whole component tree through context. It must wrap the outermost layer of the app so that Routes, Route, Link and the other routing APIs have a router to talk to. Every navigation then becomes a history push instead of a full page reload, which is what makes a single-page app feel instant to the user.
| Group | Routing & State Mgmt |
|---|---|
| Kind | Component |
| Since | React Router 6.4 |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
import { BrowserRouter, Routes, Route } from 'react-router-dom'
createRoot(document.getElementById('root')).render(
<BrowserRouter> {/* listens to the History API and provides the location context */}
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
)⚙️ Parameters
| children | The application content; every component inside the container can read the routing context. |
|---|---|
| basename | Optional. A prefix added to all paths when the app is deployed under a sub-path, e.g. basename='/app'. |
Returns：Nothing (it is a component). It renders children and broadcasts the current location and the navigation methods to the whole subtree.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
Clicking a nav button switches the page and the current path is wrapped in brackets - exactly what BrowserRouter does internally: the path changes, the context updates and the matching Route renders (simulated demo).💡 Key Points
🏷️ More Routing & State
💡 Related Cases
📚 Related Tutorials
❓ FAQ
