React Router Explained: Navigation, Dynamic Routes and Protected Pages

// AppRouter.jsx — the root routing setup for a small e-commerce app
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

import MainLayout from './layouts/MainLayout';
import HomePage from './pages/HomePage';
import ProductListPage from './pages/ProductListPage';
import ProductDetailPage from './pages/ProductDetailPage';
import NotFoundPage from './pages/NotFoundPage';

export default function AppRouter() {
  return (
    // BrowserRouter creates the History API context — everything inside
    // can read the current URL and react to navigation events
    <BrowserRouter>
      <Routes>
        {/*
          The path="/" route wraps shared UI (nav, footer) via MainLayout.
          Child routes render inside MainLayout's <Outlet /> placeholder.
        */}
        <Route path="/" element={<MainLayout />}>
          {/* index means: render this when path is exactly "/" */}
          <Route index element={<HomePage />} />

          {/* Static nested route — maps to /products */}
          <Route path="products" element={<ProductListPage />} />

          {/*
            Dynamic segment: the colon prefix (:productId) means
            "capture whatever is here as a named parameter".
            /products/42 → productId = "42"
            /products/apple-watch → productId = "apple-watch"
          */}
          <Route path="products/:productId" element={<ProductDetailPage />} />

          {/* Catch-all: path="*" matches anything that didn't match above */}
          <Route path="*" element={<NotFoundPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

// ProductDetailPage.jsx — reads a URL param and fetches matching product data
import React, { useEffect, useState } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';

// Simulated async API call — replace with your real fetch/axios call
async function fetchProductById(id) {
  const mockProducts = {
    '1': { id: 1, name: 'Wireless Headphones', price: 89.99, stock: 14 },
    '2': { id: 2, name: 'Mechanical Keyboard', price: 129.99, stock: 0 },
  };
  // Simulate network latency
  await new Promise(resolve => setTimeout(resolve, 400));
  return mockProducts[id] ?? null; // Return null if product doesn't exist
}

export default function ProductDetailPage() {
  // useParams returns an object matching your route's dynamic segments
  // { productId: "1" } — always a string, even if the URL contains "1"
  const { productId } = useParams();

  const navigate = useNavigate(); // For programmatic navigation
  const [product, setProduct] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    setIsLoading(true);

    fetchProductById(productId)
      .then(data => {
        if (!data) {
          // Product doesn't exist — redirect to the 404 page
          navigate('/not-found', { replace: true });
          return;
        }
        setProduct(data);
      })
      .finally(() => setIsLoading(false));

  // CRITICAL: productId must be in the dependency array.
  // Without it, navigating from /products/1 to /products/2
  // would show product 1's data on the /products/2 URL.
  }, [productId, navigate]);

  if (isLoading) return <p>Loading product...</p>;
  if (!product) return null; // navigate() is already firing

  return (
    <div className="product-detail">
      <Link to="/products">← Back to all products</Link>
      <h1>{product.name}</h1>
      <p>Price: ${product.price.toFixed(2)}</p>
      <p>Status: {product.stock > 0 ? `${product.stock} in stock` : 'Out of stock'}</p>

      <button
        disabled={product.stock === 0}
        onClick={() => navigate('/cart', { state: { productId: product.id } })}
      >
        Add to Cart
      </button>
    </div>
  );
}

// MainLayout.jsx — persistent shell that wraps all public-facing pages
import React from 'react';
import { Outlet, NavLink, useNavigate } from 'react-router-dom';

// useOutletContext lets child routes read values passed via <Outlet context={}>
import { useOutletContext } from 'react-router-dom';

const SITE_NAME = 'ShopReact';

export default function MainLayout() {
  const navigate = useNavigate();

  // Simulated cart count — in real life this comes from global state (Zustand/Redux)
  const cartItemCount = 3;

  return (
    <div className="app-shell">

      {/* ── NAVBAR — renders on every route wrapped by this layout ── */}
      <header className="navbar">
        <NavLink to="/" className="navbar__logo">
          {SITE_NAME}
        </NavLink>

        <nav className="navbar__links">
          {/*
            NavLink is like Link, but automatically adds an "active" CSS class
            when its href matches the current URL. Perfect for highlighting
            the current section in your nav menu.
          */}
          <NavLink
            to="/products"
            className={({ isActive }) =>
              isActive ? 'nav-link nav-link--active' : 'nav-link'
            }
          >
            Products
          </NavLink>
        </nav>

        <button
          className="navbar__cart-button"
          onClick={() => navigate('/cart')}
        >
          🛒 Cart ({cartItemCount})
        </button>
      </header>

      {/* ── MAIN CONTENT AREA ── */}
      <main className="page-content">
        {/*
          <Outlet /> is the magic placeholder.
          React Router replaces this with whichever child route currently matches.
          The navbar and footer above/below never unmount — zero flicker.

          We pass cartItemCount as context so any child page can read it
          via useOutletContext() without prop drilling.
        */}
        <Outlet context={{ cartItemCount }} />
      </main>

      {/* ── FOOTER — same deal, always visible ── */}
      <footer className="footer">
        <p>© {new Date().getFullYear()} {SITE_NAME}. All rights reserved.</p>
      </footer>

    </div>
  );
}

// ── Helper hook — export this so child pages can import it with types ──
// Usage in any child page: const { cartItemCount } = useCartContext();
export function useCartContext() {
  return useOutletContext();
}

// ProtectedRoute.jsx — guards any routes nested inside it
import React from 'react';
import { Navigate, Outlet, useLocation } from 'react-router-dom';

// In a real app this hook reads from your auth context / Zustand store / Redux
function useAuthStatus() {
  // Simulating: user is NOT logged in
  // Swap to `return { isAuthenticated: true, user: { role: 'admin' } }` to test the happy path
  return { isAuthenticated: false, user: null };
}

/**
 * ProtectedRoute wraps any routes that require authentication.
 * Use it as a parent route in your router config — child routes
 * render via <Outlet /> only when the user is authenticated.
 *
 * @param {string} requiredRole - Optional. If provided, also checks user.role.
 */
export default function ProtectedRoute({ requiredRole = null }) {
  const { isAuthenticated, user } = useAuthStatus();

  // useLocation gives us the current URL so we can redirect back after login
  const currentLocation = useLocation();

  // ── STEP 1: Is the user logged in at all? ──
  if (!isAuthenticated) {
    /*
      <Navigate> is the declarative way to redirect during render.
      Don't use useNavigate() inside the render path — it can cause
      issues with React's concurrent rendering.

      `state` carries the originally-requested path so the login page
      can redirect back after a successful login.

      `replace` means the login redirect won't create a new history entry —
      pressing Back won't loop the user through the login page again.
    */
    return (
      <Navigate
        to="/login"
        state={{ redirectAfterLogin: currentLocation.pathname }}
        replace
      />
    );
  }

  // ── STEP 2: Does this route require a specific role? ──
  if (requiredRole && user?.role !== requiredRole) {
    // User is logged in but lacks the required permission
    return <Navigate to="/unauthorized" replace />;
  }

  // ── STEP 3: All checks passed — render the child routes ──
  return <Outlet />;
}

// ─────────────────────────────────────────────────────────────────────────────
// HOW TO USE THIS IN YOUR ROUTER CONFIG:
//
// <Routes>
//   <Route path="/" element={<MainLayout />}>
//     <Route index element={<HomePage />} />
//     <Route path="products" element={<ProductListPage />} />
//
//     {/* All routes inside here require login */}
//     <Route element={<ProtectedRoute />}>
//       <Route path="dashboard" element={<DashboardPage />} />
//       <Route path="orders" element={<OrdersPage />} />
//     </Route>
//
//     {/* This route also requires the "admin" role */}
//     <Route element={<ProtectedRoute requiredRole="admin" />}>
//       <Route path="admin" element={<AdminPanel />} />
//     </Route>
//   </Route>
// </Routes>
// ─────────────────────────────────────────────────────────────────────────────


// LoginPage.jsx — reads the redirect state and uses it after login
export function LoginPage() {
  const navigate = useNavigate();
  const location = useLocation();

  // Pull out where the user was trying to go before being redirected
  const redirectTarget = location.state?.redirectAfterLogin ?? '/dashboard';

  function handleSuccessfulLogin() {
    // ... your real auth logic here ...
    // Once auth succeeds, send them where they originally wanted to go
    navigate(redirectTarget, { replace: true });
  }

  return (
    <div>
      <h1>Log In</h1>
      <button onClick={handleSuccessfulLogin}>Simulate Login</button>
    </div>
  );
}