Eric Campbell 6 min read JavaScript

React Router: Client-Side Navigation

Traditional web applications rely on server-side routing where every navigation triggers a full page reload. Click a link, the browser sends a request to the server, which responds with an entirely...

Key Insights

  • Client-side routing eliminates full page reloads by manipulating the browser’s history API, resulting in instant navigation and improved user experience compared to traditional server-side routing.
  • React Router’s declarative approach uses components like Routes, Route, and Link to define navigation structure, making routing logic readable and maintainable within your component tree.
  • Modern React Router (v6+) provides powerful hooks like useNavigate, useParams, and useLocation that give you programmatic control over navigation and access to routing state throughout your application.

Introduction to Client-Side Routing

Traditional web applications rely on server-side routing where every navigation triggers a full page reload. Click a link, the browser sends a request to the server, which responds with an entirely new HTML document. This approach works, but it’s slow and creates a jarring user experience.

Client-side routing changes the game. Instead of requesting new pages from the server, your JavaScript application intercepts navigation events and updates the UI dynamically. The browser’s URL changes, but no server request happens. The result? Instant page transitions, preserved application state, and a user experience that feels more like a native app than a traditional website.

React Router is the de facto routing solution for React applications. It provides a declarative way to handle navigation, leveraging React’s component model to make routing feel natural within your application architecture. Whether you’re building a simple marketing site or a complex dashboard, React Router gives you the tools to manage navigation elegantly.

Setting Up React Router

Getting started with React Router requires a single npm package. For most applications, you’ll want react-router-dom, which includes everything needed for web applications.

npm install react-router-dom

Once installed, wrap your application with BrowserRouter. This component uses the HTML5 history API to keep your UI in sync with the URL. Place it at the root of your component tree, typically in your main App.js or index.js file.

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

With BrowserRouter in place, your application can now use React Router’s navigation components and hooks throughout the component tree.

Defining Routes and Navigation

Routes define the mapping between URL paths and the components that should render. React Router v6 uses a Routes component that contains individual Route components. Each Route specifies a path and the element to render when that path matches.

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

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

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

function Contact() {
  return <h1>Contact</h1>;
}

function App() {
  return (
    <div>
      <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>
    </div>
  );
}

export default App;

The Link component replaces traditional anchor tags. It prevents the default browser behavior of full page reloads and instead uses the history API to update the URL and trigger a re-render with the appropriate component.

For navigation bars where you want to style the active link differently, use NavLink instead. It provides an isActive state that you can use for conditional styling.

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

function Navigation() {
  return (
    <nav>
      <NavLink 
        to="/" 
        className={({ isActive }) => isActive ? 'active' : ''}
      >
        Home
      </NavLink>
      <NavLink 
        to="/about"
        style={({ isActive }) => ({
          fontWeight: isActive ? 'bold' : 'normal',
          color: isActive ? '#007bff' : '#333'
        })}
      >
        About
      </NavLink>
      <NavLink to="/contact">
        {({ isActive }) => (
          <span className={isActive ? 'link-active' : 'link'}>
            Contact
          </span>
        )}
      </NavLink>
    </nav>
  );
}

Dynamic Routes and URL Parameters

Real applications need dynamic routes that respond to variable URL segments. Product pages, user profiles, and blog posts all follow patterns where part of the URL is dynamic. React Router handles this with route parameters.

Define dynamic segments in your path using a colon prefix. Access these parameters in your components using the useParams hook.

import { Routes, Route, useParams, Link } from 'react-router-dom';

const products = {
  1: { id: 1, name: 'Laptop', price: 999 },
  2: { id: 2, name: 'Mouse', price: 29 },
  3: { id: 3, name: 'Keyboard', price: 79 }
};

function ProductList() {
  return (
    <div>
      <h2>Products</h2>
      {Object.values(products).map(product => (
        <div key={product.id}>
          <Link to={`/products/${product.id}`}>{product.name}</Link>
        </div>
      ))}
    </div>
  );
}

function ProductDetail() {
  const { productId } = useParams();
  const product = products[productId];

  if (!product) {
    return <h2>Product not found</h2>;
  }

  return (
    <div>
      <h2>{product.name}</h2>
      <p>Price: ${product.price}</p>
      <Link to="/products">Back to Products</Link>
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/products" element={<ProductList />} />
      <Route path="/products/:productId" element={<ProductDetail />} />
    </Routes>
  );
}

The useParams hook returns an object containing all route parameters. In this example, accessing /products/2 would give you { productId: '2' }. Note that parameters are always strings, so convert them when necessary.

Programmatic Navigation and Hooks

Sometimes you need to navigate programmatically—after form submissions, on button clicks, or based on application logic. The useNavigate hook provides this functionality.

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

function ContactForm() {
  const navigate = useNavigate();
  const location = useLocation();

  const handleSubmit = (e) => {
    e.preventDefault();
    
    // Process form data
    const formData = new FormData(e.target);
    const data = Object.fromEntries(formData);
    
    // Navigate to confirmation page with state
    navigate('/confirmation', { 
      state: { 
        message: `Thanks for contacting us, ${data.name}!`,
        from: location.pathname 
      }
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" placeholder="Your name" required />
      <input name="email" type="email" placeholder="Your email" required />
      <textarea name="message" placeholder="Your message" required />
      <button type="submit">Send</button>
    </form>
  );
}

function Confirmation() {
  const location = useLocation();
  const navigate = useNavigate();
  const { message, from } = location.state || {};

  return (
    <div>
      <h2>{message || 'Form submitted successfully!'}</h2>
      <button onClick={() => navigate(from || '/')}>
        Go Back
      </button>
    </div>
  );
}

The useNavigate hook returns a function that accepts a path and optional configuration. You can pass state that persists across the navigation, accessible via useLocation in the destination component. Use navigate(-1) to go back one step in history, similar to the browser’s back button.

Nested Routes and Layouts

Complex applications often have nested navigation structures. A dashboard might have a sidebar with links to profile, settings, and analytics—all sharing the same layout. React Router’s Outlet component makes this pattern straightforward.

import { Routes, Route, Link, Outlet } from 'react-router-dom';

function DashboardLayout() {
  return (
    <div className="dashboard">
      <aside>
        <nav>
          <Link to="/dashboard/profile">Profile</Link>
          <Link to="/dashboard/settings">Settings</Link>
          <Link to="/dashboard/analytics">Analytics</Link>
        </nav>
      </aside>
      <main>
        <Outlet />
      </main>
    </div>
  );
}

function Profile() {
  return <h2>User Profile</h2>;
}

function Settings() {
  return <h2>Account Settings</h2>;
}

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

function App() {
  return (
    <Routes>
      <Route path="/dashboard" element={<DashboardLayout />}>
        <Route path="profile" element={<Profile />} />
        <Route path="settings" element={<Settings />} />
        <Route path="analytics" element={<Analytics />} />
      </Route>
    </Routes>
  );
}

The Outlet component acts as a placeholder where child routes render. This pattern keeps your layout code DRY and makes it easy to add new nested routes without duplicating the layout structure.

Advanced Patterns and Best Practices

Protected routes are essential for applications with authentication. Create a wrapper component that checks authentication status before rendering protected content.

import { Navigate, useLocation } from 'react-router-dom';

function ProtectedRoute({ children }) {
  const isAuthenticated = useAuth(); // Your auth logic here
  const location = useLocation();

  if (!isAuthenticated) {
    // Redirect to login, saving the attempted location
    return <Navigate to="/login" state={{ from: location }} replace />;
  }

  return children;
}

function App() {
  return (
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route 
        path="/dashboard/*" 
        element={
          <ProtectedRoute>
            <Dashboard />
          </ProtectedRoute>
        } 
      />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

The catch-all route (path="*") handles 404 errors by matching any path that doesn’t match earlier routes. Always place it last in your route definitions.

For performance optimization, use React’s lazy loading with route-based code splitting:

import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./Dashboard'));
const Analytics = lazy(() => import('./Analytics'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/analytics" element={<Analytics />} />
      </Routes>
    </Suspense>
  );
}

This splits your application into smaller chunks that load on demand, reducing initial bundle size and improving load times.

Client-side routing transforms how users interact with your React applications. Master these patterns, and you’ll build faster, more intuitive interfaces that feel responsive and modern.

Liked this? There's more.

Every week: one practical technique, explained simply, with code you can use immediately.