📘 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:
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. 💻💙