When building a React application, users move between pages like Home, About, Contact, etc. Instead of reloading the entire page, React uses Browser Router to change pages without refreshing.

What is Browser Router?

BrowserRouter is used to enable routing in React applications.

It allows:

• Navigate between pages
• Change URL without page refresh
• Create Single Page Applications (SPA)

Simply:

BrowserRouter connects URL paths with React components.

Why do we use Browser Router?

Without Browser Router:

• Every page change reloads the website
• Slower user experience

With Browser Router:

• Faster navigation
• Better user experience
• No full page reload

Install React Router

npm install react-router-dom

Basic Setup

Step 1: Import BrowserRouter

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

Step 2: Wrap App Component

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")).render(

<BrowserRouter>
<App />
</BrowserRouter>

);

Creating Routes

import { Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";

function App(){

return(

<Routes>

<Route path="/" element={<Home/>}/>

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

</Routes>

)

}

export default App;

Navigation Using Link

Instead of using:

<a href="/about">About</a>

Use:

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

<Link to="/">Home</Link>

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

Why Link?

Because:

• Prevents page refresh
• Faster navigation
• Keeps SPA behavior

Example Folder Structure

src

├── App.jsx

├── Home.jsx

├── About.jsx

└── main.jsx

Complete Example

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

function Home(){

return <h1>Home Page</h1>

}

function About(){

return <h1>About Page</h1>

}

function App(){

return(

<>

<nav>

<Link to="/">Home</Link>

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

</nav>

<Routes>

<Route path="/" element={<Home/>}/>

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

</Routes>

</>

)

}

export default App;

Important Components

Simply Definition:

BrowserRouter is used for routing in React applications. It enables navigation between pages without refreshing the browser and helps create Single Page Applications.

Conclusion

Browser Router helps React applications:

• Navigate between pages
• Change URL without reload
• Create faster user experience
• Build Single Page Applications

Without BrowserRouter -> Full page reload
With BrowserRouter -> Smooth navigation