Browser Router

What is browser Router :

A BrowserRouter is a core component in the popular web framework React Router used to power navigation in Single-Page Applications (SPAs).

It allows navigation without reloading the full page.

It updates only the necessary components on the screen instead of loading the whole Html page.

This generates clean, SEO-friendly, and human-readable URLs.

Syntax

<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>

Navigating via links using,

<Link to="/about">Go to About</Link>

Example :

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

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

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