Wrapping an application in BrowserRouter enables all of React Router's routing components and hooks to function, since they all rely on routing context that only a Router component, like BrowserRouter, provides. BrowserRouter specifically uses the browser's History API to produce clean URLs, like example.com/about, as opposed to HashRouter, an older alternative that uses a URL fragment instead, like example.com/#/about — BrowserRouter requires the server to be configured to serve the same single index.html file for every possible path, since a direct visit or refresh on a route like /about is a genuine server request for that exact path, which the server needs to handle by still returning the React app.
1Understanding BrowserRouter
Wrapping an application in BrowserRouter enables all of React Router's routing components and hooks to function, since they all rely on routing context that only a Router component, like BrowserRouter, provides. BrowserRouter specifically uses the browser's History API to produce clean URLs, like example.com/about, as opposed to HashRouter, an older alternative that uses a URL fragment instead, like example.com/#/about — BrowserRouter requires the server to be configured to serve the same single index.html file for every possible path, since a direct visit or refresh on a route like /about is a genuine server request for that exact path, which the server needs to handle by still returning the React app.
BrowserRouter requires your server, or hosting platform, to be configured to serve the same index.html for every route path, since a direct browser visit or refresh to a client-side route like /about is a real request the server needs to handle gracefully, not silently 404.
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<Routes>
<Route path="/" element={<App />} />
</Routes>
</BrowserRouter>
);2Practical Example
Here is a real-world application of BrowserRouter showing how it is used in production React code.
// Without BrowserRouter (or any Router) wrapping the app:
import { useNavigate } from 'react-router-dom';
function Button() {
const navigate = useNavigate();
return <button onClick={() => navigate('/home')}>Go</button>;
}3Best Practices
Follow these guidelines when working with BrowserRouter:
1. Wrap the application in a single BrowserRouter near the root, not multiple nested ones, so routing hooks and components throughout the tree share one consistent routing context
2. Configure your hosting/server to serve index.html for any unmatched path, so direct visits or refreshes on client-side routes don't produce a server-level 404
3. Use BrowserRouter over the older HashRouter for standard web applications, reserving HashRouter mainly for static hosting environments that genuinely can't be configured to handle arbitrary paths
Tip: BrowserRouter requires your server, or hosting platform, to be configured to serve the same index.html for every route path, since a direct browser visit or refresh to a client-side route like /about is a real request the server needs to handle gracefully, not silently 404.
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<Routes>
<Route path="/" element={<App />} />
</Routes>
</BrowserRouter>
);