Routing in React: Navigating with React Router

When I was building my first multi-page React app, I hit a wall, how do I move from a homepage to an about page without reloading the entire site? I wanted that smooth, app-like navigation, not a clunky refresh every time.

That’s when I discovered React Router, and everything changed. It made my single-page application (SPA) feel like a real app, clean URLs, fast navigation, and dynamic rendering based on the route.

In this blog, we’ll explore:

• What routing is and why React needs a router

• How to set up react-router-dom

• Defining routes with components

• Real-world examples: navigation bars, nested routes, 404 pages

• And best practices for cleaner route structures

Let’s dive into routing, the heartbeat of multi-page React apps.

---

🚗 Real-World Analogy: Google Maps Navigation

Imagine using Google Maps. You choose a destination, and Maps instantly updates to guide you there without reloading the whole app. That’s exactly what React Router does.

Instead of full reloads (like clicking links in HTML), it dynamically loads the correct page, just like updating directions on a map without restarting your phone.

---

📦 What Is Routing in React?

React is a single-page application framework — it loads a single index.html, and everything else happens inside JavaScript.

To show different pages (like /about, /login, /products), React needs a router to map URLs to components.

That’s where react-router-dom comes in.

---

⚙️ Installing React Router

First, install the package:

npm install react-router-dom

Or with Yarn:

yarn add react-router-dom

---

🛠 Basic Setup with BrowserRouter

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

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

🔍 What’s Happening:

• BrowserRouter wraps the app and enables routing.

• Routes acts like a switchboard.

• Each Route maps a path to a component (element).

---

Navigation Using Link

To navigate without reloading, use Link instead of <a>:

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

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

---

Real-World Project: A Blog App

Say you're building a blog app. Routes could look like:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/post/:id" element={<Post />} />
  <Route path="/about" element={<About />} />
  <Route path="*" element={<NotFound />} />
</Routes>

Features:

• /post/:id → dynamic route for each blog post.

• * → fallback for 404 pages.

---

Nested Routes

You can create layouts that wrap multiple pages.

<Route path="/dashboard" element={<DashboardLayout />}>
  <Route index element={<DashboardHome />} />
  <Route path="settings" element={<DashboardSettings />} />
</Route>

This allows shared navbars or sidebars across child pages.

---

🔄 Redirects and Navigate

Want to programmatically redirect?

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

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

  function handleLoginSuccess() {
    navigate('/dashboard');
  }

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

---

Common Gotchas

• Forgetting to wrap routes inside <BrowserRouter>

• Using href instead of Link

• Expecting full reload behavior (React Router avoids that!)

---

Summary Table

With routing set up, your React app starts to feel like a full application. Navigation becomes seamless. Your users feel like they’re in a native app.

From blogs to dashboards, portfolios to e-commerce — React Router is a must.