⚛️ React Router in React – A Complete Guide for Developers

📘 Introduction

When building single-page applications (SPAs) with React, one common challenge is managing navigation between different pages without reloading the browser.

That’s where React Router comes to the rescue! 🦸‍♂️

React Router is the standard routing library for React that enables you to handle navigation and render components based on URL paths — all without refreshing the page.

In short, React Router helps your React app behave like a multi-page site, while actually being a single-page application (SPA). 🚀

💡 Why Do We Need React Router?

In traditional websites 🌐, clicking a link reloads the entire page from the server.

But in React, we want:

✨ Smooth transitions
✨ No page reloads
✨ Better user experience
✨ Functional browser navigation (Back/Forward buttons)

React Router makes this possible by keeping everything on the client-side and updating only what’s needed.

⚙️ Installation

You can easily add React Router to your project by running:

npm install react-router-dom

>🧠 Note:

react-router-dom → for web apps

react-router-native → for React Native

🧩 Core Components of React Router

Let’s explore the most important parts of React Router 👇

🏠 1. BrowserRouter

This is the main wrapper that enables routing functionality in your React app.

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



function App() {

return (

<BrowserRouter>

<h1>My React App</h1>

</BrowserRouter>

);

}

It acts like a container for your entire application.

🛤️ 2. Routes and Route

The Routes component holds multiple Route definitions.

Each Route maps a path to a component.

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

import Home from "./Home";

import About from "./About";



function App() {

return (

<BrowserRouter>

<Routes>

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

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

</Routes>

</BrowserRouter>

);

}

📍 / → Home Page

📍 /about → About Page

🔗 3. Link and NavLink

Use Link instead of HTML <a> tags for smooth navigation without page reloads.

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



function Navbar() {

return (

<nav>

<Link to="/">🏡 Home</Link> | <Link to="/about">ℹ️ About</Link>

</nav>

);

}

Want to highlight the active link? Use NavLink:

<NavLink

to="/about"

className={({ isActive }) => (isActive ? "active" : "")}

>

⭐ About

</NavLink>

🧭 4. useNavigate Hook

For programmatic navigation, use the useNavigate() hook.

Example: redirecting after login ✅

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



function Login() {

const navigate = useNavigate();



const handleLogin = () => {

// logic

navigate("/dashboard");

};



return <button onClick={handleLogin}>🔓 Login</button>;

}

🧱 5. useParams Hook

Access dynamic route parameters using useParams().

<Route path="/user/:id" element={<User />} />

In the User component:

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

function User() {

const { id } = useParams();

return <h2>👤 User ID: {id}</h2>;

}

Visiting /user/101 → shows User ID: 101

📍 6. useLocation Hook

Get info about the current URL path and state.

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

function LocationInfo() {

const location = useLocation();

return <p>📂 Current path: {location.pathname}</p>;

}

🔍 7. useSearchParams Hook

Handle query parameters like ?id=123.

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



function Products() {

const [searchParams] = useSearchParams();

const id = searchParams.get("id");

return <h3>🛒 Product ID: {id}</h3>;

}

🧩 8. Nested Routes

React Router supports nested routing, allowing sub-pages within a page.

<Route path="/dashboard" element={<Dashboard />}>

<Route path="profile" element={<Profile />} />

<Route path="settings" element={<Settings />} />

</Route>

Inside Dashboard.js

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



function Dashboard() {

return (

<div>

<h2>📊 Dashboard</h2>

<Outlet /> {/* Renders child routes */}

</div>

);

}

🔁 9. Navigate Component

Used for redirecting users programmatically.

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



function PrivateRoute({ isAuthenticated }) {

return isAuthenticated ? <Dashboard /> : <Navigate to="/login" />;

}

🧠 Example: Complete React Router Setup

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;

⚡ Key Features of React Router v6+

✅ Simplified Route Definitions
✅ Nested Routing with <Outlet />
✅ Powerful Hooks (e.g., useNavigate, useParams)
✅ Easy Redirection
✅ No more “Switch” — replaced with “Routes”

🎯 Benefits of Using React Router

✨ Seamless Navigation (No reloads)
✨ Supports Dynamic URLs
✨ Easy Protected Routes (Authentication)
✨ Enhanced User Experience
✨ Works on both Web & Mobile

🏁 Conclusion

React Router is a must-know tool for every React developer. It brings smooth navigation, dynamic routing, and better control over page rendering — all while keeping your app fast and interactive ⚡.

So, next time you build a React app, remember:

> Routing is not just about links — it’s about user experience. 💻💙