React Router

Build multi-page navigation for your DataFlow dashboard with routes, parameters, and programmatic navigation.

Right now your DataFlow dashboard shows everything on one page. But real analytics platforms have separate pages. Dashboard overview. User details. Settings page. Transaction history.

React Router turns your single-page app into what feels like a multi-page website. Same React app, different views. No page refreshes. No server requests. Just instant navigation between components.

Think of it like having multiple rooms in your house — same building, different purposes.

Installing React Router

React Router isn't built into React. You install it separately. That gives you flexibility — use it when you need routing, skip it for simple single-page components.

// Install React Router v6
npm install react-router-dom

// Or with yarn
yarn add react-router-dom

The package name is react-router-dom because it's the web version. There's also React Router for mobile apps.

Basic Router Setup

Every React Router app needs a BrowserRouter wrapper. This tells React Router to listen for URL changes and update your components accordingly.

// App.js - Basic router setup
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/users" element={<UsersPage />} />
        <Route path="/settings" element={<SettingsPage />} />
      </Routes>
    </BrowserRouter>
  );
}

What just happened?

React Router matched the current URL path and rendered the corresponding component. The Routes wrapper finds the matching Route and displays its element. Try this: Change the URL manually to see different pages load.

Navigation with Link

Regular <a> tags cause full page reloads. That defeats the purpose of a single-page app. React Router's Link component changes the URL without refreshing the page.

// Navigation.js - Link components
import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav style={{padding: '16px', background: '#f1f5f9'}}>
      <Link to="/">Dashboard</Link> | 
      <Link to="/users">Users</Link> | 
      <Link to="/settings">Settings</Link>
    </nav>
  );
}

What just happened?

Clicking the navigation links changes the URL and renders different components instantly. No page refresh. The browser back/forward buttons work too. Try this: Click between pages and use your browser's back button.

URL Parameters

Real apps need dynamic routes. User profiles with different IDs. Product pages with different SKUs. Transaction details with different order numbers.

URL parameters let you capture parts of the URL as variables. Like /user/123 where 123 is the user ID.

// UserProfile.js - URL parameters
import { useParams } from 'react-router-dom';

function UserProfile() {
  const { userId } = useParams(); // Extract :userId from URL
  
  return (
    <div style={{padding: '20px', background: '#eff6ff'}}>
      <h2>User Profile</h2>
      <p>Viewing user: {userId}</p>
      <p>Orders: 23 | Revenue: $4,567</p>
    </div>
  );
}

// In your Routes
<Route path="/user/:userId" element={<UserProfile />} />

What just happened?

The :userId in the route path becomes a parameter. useParams extracts it from the current URL. Each user link creates a different URL with their ID. Try this: Change the user ID in the address bar manually.

Programmatic Navigation

Sometimes you need to navigate programmatically. After form submission. On login success. When an error occurs. The useNavigate hook lets you change routes from JavaScript.

// LoginForm.js - Navigate after form submit
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';

function LoginForm() {
  const [email, setEmail] = useState('');
  const navigate = useNavigate();
  
  const handleLogin = (e) => {
    e.preventDefault();
    // Simulate login API call
    if (email === 'admin@dataflow.com') {
      navigate('/dashboard'); // Redirect to dashboard
    } else {
      navigate('/error'); // Redirect to error page
    }
  };

  return (
    <form onSubmit={handleLogin}>
      <input 
        type="email" 
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Enter email"
      />
      <button type="submit">Login</button>
    </form>
  );
}

What just happened?

Form submission triggers navigate() to change the route programmatically. No Link component needed. The navigation happens in JavaScript based on form data. Try this: Enter different email addresses to see different navigation paths.

Nested Routes

Complex apps have routes inside routes. Your DataFlow settings page might have sub-pages: General, Security, Billing. Each with its own URL but sharing the same layout.

// Settings with nested routes
import { Outlet, Link } from 'react-router-dom';

function Settings() {
  return (
    <div style={{padding: '20px'}}>
      <h2>Settings</h2>
      <nav>
        <Link to="/settings/general">General</Link> | 
        <Link to="/settings/security">Security</Link> | 
        <Link to="/settings/billing">Billing</Link>
      </nav>
      <Outlet /> {/* Child routes render here */}
    </div>
  );
}

// In your Routes
<Route path="/settings" element={<Settings />}>
  <Route path="general" element={<GeneralSettings />} />
  <Route path="security" element={<SecuritySettings />} />
  <Route path="billing" element={<BillingSettings />} />
</Route>

What just happened?

The parent Settings component stays rendered while child routes change inside the <Outlet />. The navigation bar persists across all sub-pages. URL shows the full path like /settings/general. Try this: Navigate between settings tabs and watch the content area change.

Common Gotchas

Forgetting BrowserRouter wrapper causes "useNavigate may be used only in the context of a Router component" errors.

Using regular <a> tags instead of Link causes page refreshes and loses React state.

Quiz

Up Next: API Calls with Fetch

Connect your DataFlow dashboard to real data sources and handle loading states, errors, and async operations.

← Previous Course Index Next →