Setting Up Routes in React: BrowserRouter vs HashRouter Explained

Once you’ve installed React Router, the next step is to set up the routes that connect different pages or components in your app.

React Router provides different routers for handling navigation.
The two most commonly used are:

BrowserRouter – uses clean URLs with HTML5 history API
HashRouter – uses URL hashes (#) for navigation

Both make it possible to navigate between pages without reloading the browser.

BrowserRouter

What It Does

BrowserRouter uses the HTML5 history API (pushState, replaceState) to keep your UI in sync with the URL.
It creates clean, modern URLs like:

This is the most commonly used router for modern web apps.

Setup Example

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

function Home() {
  return <h2>🏠 Home Page</h2>;
}

function About() {
  return <h2>ℹ️ About Page</h2>;
}

function Contact() {
  return <h2>📞 Contact Page</h2>;
}

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> |{" "}
        <Link to="/about">About</Link> |{" "}
        <Link to="/contact">Contact</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

When you click the links, React updates the view instantly, without reloading the page.

How It Works

BrowserRouter wraps the app to enable routing.
Routes define all available routes.
Route matches a path to a component.
Link allows navigation without refreshing the browser.

HashRouter

What It Does

HashRouter uses the URL hash (#) to track the route.
It’s mainly used when server configuration doesn’t support the HTML5 history API — for example, in static web servers or GitHub Pages.

The URLs look like this:

Setup Example

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

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

function App() {
  return (
    <HashRouter>
      <nav>
        <Link to="/">Home</Link> |{" "}
        <Link to="/about">About</Link>
      </nav>

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

export default App;

Works even if your hosting provider doesn’t support backend routing.

BrowserRouter vs HashRouter

Feature	BrowserRouter	HashRouter
URL Format	`/about`	`/#/about`
History API	Uses HTML5 `pushState`	Uses URL hash fragment
Browser Reload Behavior	Requires server to handle routes	Works even on static servers
SEO Friendly	✅ Yes	❌ No (not ideal for SEO)
Best For	Dynamic web apps with backend support	Static sites or GitHub Pages

When to Use Each

Scenario	Recommended Router
React app hosted on modern backend (Node, Firebase, etc.)	BrowserRouter
Static hosting (e.g., GitHub Pages, Netlify, or shared hosting)	HashRouter
Need SEO optimization	BrowserRouter
No server configuration control	HashRouter

Combining with Navigation

You can use <Link> or <NavLink> for navigation.

Example using NavLink (for active styling):

import { NavLink } from "react-router-dom";

function Navbar() {
  return (
    <nav>
      <NavLink to="/" style={({ isActive }) => ({ fontWeight: isActive ? "bold" : "normal" })}>
        Home
      </NavLink>{" "}
      |{" "}
      <NavLink to="/about" style={({ isActive }) => ({ fontWeight: isActive ? "bold" : "normal" })}>
        About
      </NavLink>
    </nav>
  );
}

Highlights the active route automatically.

Troubleshooting Tip

If your BrowserRouter routes show a blank page after reload, it means your server isn’t configured for SPA routing.
Add this rule in your server configuration (like Apache or Nginx) to always serve index.html for unknown paths.

Alternative: Switch to HashRouter, which works without extra setup.