Browser Router in React

#javascript #webdev #beginners #react

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

Component	Purpose
BrowserRouter	Enables routing
Routes	Holds all routes
Route	Creates route path
Link	Navigation between pages

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: