Introduction: Why React Routing Matters

React is known for building Single Page Applications (SPAs), where navigation happens without full page reloads. But how do you move between pages like /about, /contact, or /dashboard?

That’s where React Router comes in.

React Router is the standard routing library for React. It allows you to define routes, handle dynamic parameters, render nested views, and control navigation programmatically—all while keeping the app state intact and performance smooth.

Getting Started with React Router

✅ Step 1: Install React Router DOM

React Router is not included in React by default. You must install it manually:

npm install react-router-dom

⚠️ This guide uses React Router v6+, which has a significantly cleaner and more concise API.

✅ Step 2: Setup Basic Routing

Import the required components from the library:

import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link
} from 'react-router-dom';

Core Concepts of React Routing

1. BrowserRouter

Wraps your entire app and enables history-based routing.

2. Routes and Route

Defines which components render for which paths.

3. Link and NavLink

Replace anchor tags (<a>) to enable internal navigation without reloading.

Basic Routing Example

import React from 'react';
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link
} from 'react-router-dom';

function Home() {
  return <h2>???? Home Page</h2>;
}

function About() {
  return <h2>???? About Us</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link> | 
        <Link to="/about">About</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

✅ Now, navigating to /about will render the About component without a full reload.

Advanced Routing Features

✅ 1. Dynamic Routing (Route Params)

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

In the User component, you can access the id using:

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

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

✅ 2. Nested Routes

You can render sub-routes inside parent components:

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

Inside Dashboard.js:

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

✅ 3. Programmatic Navigation

Use useNavigate to redirect users in code:

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

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

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

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

✅ Complete Example: A Multi-Page React App

import React from 'react';
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link,
  useParams,
  useNavigate
} from 'react-router-dom';

function Home() {
  return <h2>???? Welcome to the Home Page</h2>;
}

function About() {
  return <h2>???? About Our App</h2>;
}

function Profile() {
  const { username } = useParams();
  return <h2>???? Viewing profile of: {username}</h2>;
}

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

  const handleLogin = () => {
    // Placeholder login logic
    navigate('/profile/johndoe');
  };

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

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link> | 
        <Link to="/about">About</Link> | 
        <Link to="/login">Login</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/profile/:username" element={<Profile />} />
        <Route path="/login" element={<Login />} />
      </Routes>
    </Router>
  );
}

export default App;

Comparison Table: Router Features

Tips & Common Pitfalls

✅ Best Practices

• Use NavLink for better UX with active link styling.

• Group nested routes logically inside parent components.

• Use fallback routes (e.g., 404 Not Found) using *.

❌ Common Mistakes

Conclusion: Navigate Your App Like a Pro

React Router empowers developers to build scalable, multi-page applications with elegant, declarative navigation. From basic routing to advanced dynamic routes, it’s the backbone of client-side routing in React.

✅ Key Takeaways:

• Install react-router-dom for SPA routing.

• Use <Routes> and <Route> to define paths.

• Leverage useParams and useNavigate for dynamic routing and redirects.

• Organize complex apps using nested routes.