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

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

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.