← React Beginner Questions - Set 3 Q22

What is the difference between BrowserRouter and HashRouter?

React Beginner Questions - Set 3

Same API, different URL shape. The hash variant exists for hosting where you cannot rewrite server paths.

Example

1
2
3
4
5
6
7
8
9
10
11
12

// BrowserRouter -> https://app.example.com/users/7
import { BrowserRouter } from 'react-router-dom';
<BrowserRouter><App /></BrowserRouter>

// HashRouter -> https://app.example.com/#/users/7
import { HashRouter } from 'react-router-dom';
<HashRouter><App /></HashRouter>

// Deep link /users/7 needs the server to answer with index.html,
// otherwise the request 404s before React ever loads.
# nginx
location / { try_files $uri /index.html; }

What to notice

• BrowserRouter uses the History API; clean URLs but requires server fallback.
• HashRouter keeps everything after `#`, so static hosts (S3, GitHub Pages) work without configuration.
• The SEO cost of `#` is real; pick BrowserRouter when you control the server.