What is the difference between BrowserRouter, HashRouter, and MemoryRouter?

All three are drop-in <Router> implementations from react-router-dom (see [What are the <Router> components of React Router v6?](#what-are-the-router-components-of-react-router-v6)) that wrap a different history implementation, so your app's routes work the same way — only how the URL is stored/read differs.

| Aspect | <BrowserRouter> | <HashRouter> | <MemoryRouter> |
| --- | --- | --- | --- |
| URL format | Clean URLs using the HTML5 History API (/about) | Uses a URL hash fragment (/#/about) | No URL at all — history is kept purely in memory |
| Where history lives | Browser's window.history | Browser's window.location.hash | An in-memory array/stack, not tied to the browser |
| Server requirement | Server must be configured to return index.html for every route (fallback routing), otherwise a hard refresh on /about 404s | None — the part after # is never sent to the server, so any static server works with zero config | Not applicable — there's no browser/server involved |
| Typical use case | Standard web apps deployed behind a server/CDN you control (or configure) for SPA fallback | Static hosting with no server-side routing support (e.g., plain GitHub Pages, legacy browsers) | Unit/integration tests, Storybook, React Native, or any non-DOM environment |
| Back/forward buttons | Fully supported via native browser history | Supported, but the hash shows up in the URL/bookmark | Not applicable — no visible URL to bookmark/share |
| Bookmarking/sharing links | Works naturally | Works, but URLs look less clean (example.com/#/about) | N/A — not meant to be visible to a user |

     import { BrowserRouter } from "react-router-dom";
     // Standard choice for most deployed web apps
     <BrowserRouter>
       <App />
     </BrowserRouter>;
     

     import { HashRouter } from "react-router-dom";
     // Good when you can't configure server-side rewrites
     <HashRouter>
       <App />
     </HashRouter>;
     

     import { MemoryRouter } from "react-router-dom";
     // Great for tests — you can even seed the starting route
     render(
       <MemoryRouter initialEntries={["/dashboard"]}>
         <App />
       </MemoryRouter>
     );
     

In short: use BrowserRouter for real, deployed apps with clean URLs (as long as your server supports SPA fallback), HashRouter when you can't control server routing (plain static hosting), and MemoryRouter for tests or non-browser environments where there's no real URL bar to sync with.