🧭 React Routing – Create Multi-Page Navigation with React Router (2025 Guide)

---

🧲 Introduction – Why Routing Matters in React

React.js is designed for building Single Page Applications (SPAs), where navigation happens without full-page reloads. But for SPAs to mimic traditional multi-page apps, we need client-side routing — and that’s where React Router comes in.

🎯 In this guide, you’ll learn:

• How to set up React Router in a project
• Create multiple routes and pages
• Use dynamic routes, nested routes, redirects, and navigation
• Best practices for organizing route-based components

---

📘 Topics Covered

🔹 Topic	📄 Description
🧭 React Route Parameters (useParams)	Capture and use dynamic values from the URL in components
🧭 React Nested Routes & Layouts	Create route hierarchies and shared layout structures
🧭 React Navigation with useNavigate & Link	Enable navigation between pages programmatically or via links
🧭 React Redirects & 404 Error Handling	Handle page redirects and create custom 404 not found pages

---

🧰 1. Installing React Router

React Router is the most popular routing library in the React ecosystem.

✅ Installation:

npm install react-router-dom

For React Router v6+ (2025), this installs all necessary hooks and components for browser-based routing.

---

🗂️ 2. Basic Setup – BrowserRouter

Wrap your app in BrowserRouter to enable client-side navigation.

import { BrowserRouter } from 'react-router-dom';
import App from './App';

<BrowserRouter>
  <App />
</BrowserRouter>

Then use the Routes and Route components to define paths.

---

🔀 3. Defining Routes

✅ Example:

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

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

📌 Each <Route> defines a path and the component it should render.

---

🧭 4. Navigation with <Link> and <NavLink>

React Router provides <Link> for navigation without page reloads.

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

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

<NavLink> adds active class:

<NavLink to="/about" className={({ isActive }) => isActive ? 'active' : ''}>
  About
</NavLink>

✅ Ideal for styling active tabs or sidebar menus

---

📍 5. Dynamic Route Parameters

Pass URL parameters with :id, and extract them using useParams.

✅ Define route:

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

✅ Use in component:

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

function UserProfile() {
  const { id } = useParams();
  return <h2>User ID: {id}</h2>;
}

---

🧩 6. Nested Routes (Route Outlets)

Use nested <Route> blocks and <Outlet /> to structure hierarchies.

<Route path="/dashboard" element={<Dashboard />}>
  <Route path="stats" element={<Stats />} />
  <Route path="settings" element={<Settings />} />
</Route>

✅ Inside Dashboard.jsx:

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

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <Outlet />
    </div>
  );
}

✅ Allows layout reuse and structured navigation

---

🔁 7. Redirects and Navigate

Use useNavigate() to redirect programmatically.

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

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // after auth logic
    navigate('/dashboard');
  };

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

Or use <Navigate /> for declarative redirects:

<Route path="/home" element={<Navigate to="/" />} />

---

🔐 8. Protecting Routes (Private Routing)

Use conditional rendering to protect private pages:

<Route path="/dashboard" element={isLoggedIn ? <Dashboard /> : <Navigate to="/login" />} />

✅ Combine with context or auth state to restrict access

---

🧠 9. React Router Hooks Summary

Hook	Purpose
useParams()	Access route parameters (e.g., :id)
useNavigate()	Programmatic navigation
useLocation()	Get current URL location info
useRoutes()	Define routes with config objects

---

📘 Best Practices

✅ Use a layout component with <Outlet /> for nested routes
✅ Place <Routes> inside a centralized router component
✅ Avoid reloads — use <Link>, not <a>
✅ Use lazy loading for routes in large apps
✅ Keep route definitions organized in one file (route config)

---

📌 Summary – Recap & Next Steps

React Router enables powerful and efficient client-side navigation in React applications. With support for dynamic routes, nested layouts, and protected views, it provides all the tools needed for building full-featured SPAs.

🔍 Key Takeaways:

• Use <Routes> and <Route> to define page paths
• Use <Link> and <NavLink> for internal navigation
• Access parameters with useParams()
• Protect routes using conditional logic and <Navigate />
• Use <Outlet /> for nesting and shared layouts

⚙️ Real-World Relevance:
React Router powers navigation for apps like Vercel Dashboard, Netlify CMS, and countless admin panels and user-facing dashboards.

---

❓ FAQ Section

❓ What is React Router?
✅ It’s a library for routing in React apps that allows navigation between views without full-page reloads.

---

❓ What’s the difference between <Link> and <a>?
✅ <Link> updates the browser URL without reloading the page. <a> triggers a full reload.

---

❓ How do I redirect after login in React?
✅ Use useNavigate():

const navigate = useNavigate();
navigate('/dashboard');

---

❓ How do I handle 404 routes?
✅ Add a wildcard route:

<Route path="*" element={<NotFound />} />

---

❓ Can I use React Router with Next.js?
❌ No. Next.js has its own built-in routing system based on file structure.

---

Share Now :