Difference Between BrowserRouter and HashRouter in React

In React applications, both BrowserRouter and HashRouter are used for client-side routing in React Router.
The main difference is how the URL is handled.

1. BrowserRouter

BrowserRouter uses the HTML5 History API to keep the UI in sync with the URL.

URL Format

https://example.com/about

Example

import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

How It Works

• Uses clean URLs without #

• Uses browser history (pushState, replaceState)

• Looks like a normal website URL

Advantages

• Clean and professional URLs

• Better for SEO

• Preferred for modern production applications

• Better user experience

Disadvantages

• Requires server configuration

• Refreshing a page may give 404 Not Found if server is not configured properly

Example Problem

If user refreshes:

https://example.com/about

The server must redirect all routes to index.html.

Server Fix Example

Apache

RewriteEngine On
RewriteRule ^ index.html [QSA,L]

Nginx

location / {
  try_files $uri /index.html;
}

2. HashRouter

HashRouter stores the route inside the URL hash (#).

URL Format

https://example.com/#/about

Example

import { HashRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </HashRouter>
  );
}

How It Works

• Everything after # stays on the client side

• Browser never sends hash part to server

• No special server configuration required

Advantages

• Easy deployment

• Works on static hosting

• No server-side route handling needed

• Useful for older systems

Disadvantages

• URLs contain #

• Not ideal for SEO

• Looks less professional

• Less preferred in modern applications

Key Differences

Feature	BrowserRouter	HashRouter
URL Style	/about	/#/about
Uses History API	Yes	No
Uses Hash (#)	No	Yes
SEO Friendly	Yes	Limited
Requires Server Config	Yes	No
Clean URLs	Yes	No
Best For	Production apps	Static/simple hosting

When to Use Which?

Use BrowserRouter When

• Building modern production apps

• SEO matters

• You control the backend/server

• Using Nginx, Apache, IIS, Node.js, etc.

Use HashRouter When

• Hosting on static file servers

• Cannot configure server routing

• Quick prototypes/demo apps

• Legacy systems

Interview-Friendly Answer

BrowserRouter uses the HTML5 History API and provides clean URLs like /about, but it requires server-side configuration to handle page refreshes correctly.

HashRouter uses URL hashes like /#/about, does not require server configuration, but produces less clean URLs and is not ideal for SEO.

In modern React applications, BrowserRouter is generally preferred unless server configuration is unavailable.

Common Interview Follow-Up Question

Why does BrowserRouter give 404 on refresh?

Because when the browser refreshes:

/about

the request goes to the server directly.
If the server does not redirect all routes to index.html, it tries to find a physical /about file and returns 404.