React Router — Infinite Redirect Loop on Auth Guard

// 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();
}

// Visual representation of the nested route structure
// This code is not meant to be run; it shows the tree shape.
<BrowserRouter>
  <Routes>
    <Route path="/" element={<MainLayout />}>
      <Route index element={<HomePage />} />
      <Route path="products">
        <Route index element={<ProductListPage />} />
        <Route path=":productId" element={<ProductDetailPage />} />
      </Route>
      <Route element={<ProtectedRoute />}>
        <Route path="dashboard">
          <Route index element={<DashboardHome />} />
          <Route path="settings" element={<SettingsPage />} />
        </Route>
      </Route>
      <Route path="*" element={<NotFoundPage />} />
    </Route>
  </Routes>
</BrowserRouter>

// routes.config.js — shared route configuration object
const routes = [
  {
    // Parent route with layout
    path: '/',
    element: <MainLayout />,
    children: [
      { index: true, element: <HomePage /> },
      { path: 'products', element: <ProductListPage /> },
      { path: 'products/:productId', element: <ProductDetailPage /> },
      {
        // Protected routes — use a wrapper element
        element: <ProtectedRoute />,
        children: [
          {
            path: 'dashboard',
            element: <DashboardLayout />,
            children: [
              { index: true, element: <DashboardHome /> },
              { path: 'settings', element: <SettingsPage /> },
            ],
          },
        ],
      },
      { path: '*', element: <NotFoundPage /> },
    ],
  },
];

export default routes;

// App.jsx — useRoutes hook
import { useRoutes } from 'react-router-dom';
import routes from './routes.config';

export default function App() {
  const element = useRoutes(routes);
  // If no route matches, element will be null
  return element ?? <NotFoundPage />; // fallback
}

// Alternative: pass a fallback route inside the config
// Add { path: '*', element: <NotFoundPage /> } at the end of children.

// router.js — using createBrowserRouter with loaders and actions
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

// Mock API
const fakeProductApi = {
  getProduct: async (id) => {
    const products = {
      '1': { id: '1', name: 'Wireless Headphones', price: 89.99, stock: 14 },
      '2': { id: '2', name: 'Mechanical Keyboard', price: 129.99, stock: 0 },
    };
    await new Promise(r => setTimeout(r, 200));
    if (!products[id]) throw new Error('Product not found');
    return products[id];
  },
};

const router = createBrowserRouter([
  {
    path: '/',
    element: <MainLayout />,
    children: [
      { index: true, element: <HomePage /> },
      {
        path: 'products',
        children: [
          { index: true, element: <ProductListPage /> },
          {
            path: ':productId',
            // loader runs BEFORE the component renders
            loader: async ({ params }) => {
              const product = await fakeProductApi.getProduct(params.productId);
              return product; // available via useLoaderData()
            },
            element: <ProductDetailPage />,
            // errorElement catches loader and action errors
            errorElement: <ProductErrorBoundary />,
          },
        ],
      },
      {
        path: 'checkout',
        element: <CheckoutPage />,
        // action handles form submissions
        action: async ({ request }) => {
          const formData = await request.formData();
          const order = await fakeApi.placeOrder(formData);
          return redirect(`/orders/${order.id}`);
        },
      },
    ],
  },
]);

export default function App() {
  return <RouterProvider router={router} />;
}

// ProductDetailPage.jsx — uses useLoaderData()
import { useLoaderData, useNavigation } from 'react-router-dom';

export default function ProductDetailPage() {
  const product = useLoaderData(); // already fetched! No loading state needed.
  const navigation = useNavigation(); // optional: track pending navigation

  if (navigation.state === 'loading') {
    return <Spinner />; // during transition to another product
  }

  return (
    <div>
      <h1>{product.name}</h1>
      <p>${product.price}</p>
    </div>
  );
}

// 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>
  );
}

// CartPage.jsx — demonstrates programmatic navigation, state passing, and blocking navigation
import React, { useState } from 'react';
import { useNavigate, useBlocker } from 'react-router-dom';

export default function CartPage() {
  const navigate = useNavigate();
  const [cartItems, setCartItems] = useState([/* ... */]);
  const [isCheckoutPending, setIsCheckoutPending] = useState(false);

  // Block navigation if checkout is pending (prevent accidental back navigation)
  const blocker = useBlocker(
    ({ currentLocation, nextLocation }) =>
      isCheckoutPending && currentLocation.pathname !== nextLocation.pathname
  );

  function handleCheckout() {
    setIsCheckoutPending(true);
    // Simulate API call
    setTimeout(() => {
      // After success, navigate to confirmation page with order data
      navigate('/order-confirmation', {
        state: { orderId: 123, total: 49.99 },
        replace: true // Don't keep /checkout in history
      });
    }, 2000);
  }

  function goBack() {
    navigate(-1); // Go back to previous page
  }

  return (
    <div>
      <h2>Your Cart</h2>
      {/* ... */}
      <button onClick={handleCheckout} disabled={isCheckoutPending}>
        {isCheckoutPending ? 'Processing...' : 'Checkout'}
      </button>
      <button onClick={goBack}>Back</button>

      {blocker.state === 'blocked' && (
        <div>
          <p>You have an ongoing checkout. Leave anyway?</p>
          <button onClick={() => blocker.proceed()}>Leave</button>
          <button onClick={() => blocker.reset()}>Stay</button>
        </div>
      )}
    </div>
  );
}

// On the receiving end (OrderConfirmationPage.jsx):
// import { useLocation } from 'react-router-dom';
// const location = useLocation();
// const orderId = location.state?.orderId; // 123

// io.thecodeforge — javascript tutorial

import { Outlet, useRouteError, isRouteErrorResponse } from 'react-router-dom';

export default function RootLayout() {
  return (
    <div className="app-shell">
      <header>Static Nav</header>
      <Outlet />
    </div>
  );
}

// Matches parent route, wraps ALL children
export function LayoutErrorBoundary() {
  const error = useRouteError();

  if (isRouteErrorResponse(error) && error.status === 404) {
    return <h1>This page left the building.</h1>;
  }

  // Log to Sentry/DataDog in production
  return <h1>Something broke. We're on it.</h1>;
}

// io.thecodeforge — javascript tutorial

import { generateReportCsv } from '../services/reporting';

// No element — resource route returns raw data
export async function loader({ params }) {
  const csv = await generateReportCsv(params.reportId);

  return new Response(csv, {
    status: 200,
    headers: {
      'Content-Type': 'text/csv',
      'Content-Disposition': `attachment; filename="report-${params.reportId}.csv"`
    }
  });
}

// io.thecodeforge — javascript tutorial

import { lazy, Suspense } from 'react';
import { Route } from 'react-router-dom';

// Separate chunk — loaded on demand
const Dashboard = lazy(() => import('./pages/Dashboard'));

// Loader stays in same file, runs immediately
async function dashboardLoader() {
  const data = await fetch('/api/dashboard/meta');
  return data.json();
}

export default function AppRoutes() {
  return (
    <Route
      path="/dashboard"
      element={
        <Suspense fallback={<div>Loading dashboard...</div>}>
          <Dashboard />
        </Suspense>
      }
      loader={dashboardLoader}
    />
  );
}

// io.thecodeforge — javascript tutorial

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage />,
    loader: async () => {
      const data = await fetch('/api/user').then(res => res.json());
      return data;
    },
    children: [
      { index: true, element: <Home /> },
      { path: 'dashboard', element: <Dashboard />, loader: dashboardLoader },
    ],
  },
]);

export default function App() {
  return <RouterProvider router={router} />;
}

// io.thecodeforge — javascript tutorial

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

export default function LogoutButton() {
  const navigate = useNavigate();
  const location = useLocation();

  const handleLogout = () => {
    // Clear auth token, then redirect
    localStorage.removeItem('token');
    navigate('/login', { replace: true, state: { from: location } });
  };

  return <button onClick={handleLogout}>Log out</button>;
}

// io.thecodeforge — javascript tutorial

import { Route } from "react-router-dom";

export default function App() {
  return (
    <Routes>
      <Route path="/dashboard" element={<DashboardLayout />}>
        <Route index element={<DashboardHome />} />
        <Route path="settings" element={<Settings />} />
        <Route path="profile" element={<Profile />} />
      </Route>
    </Routes>
  );
}

// /dashboard renders <DashboardLayout> with <DashboardHome> inside its <Outlet>

// io.thecodeforge — javascript tutorial

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

function App() {
  return (
    <Routes>
      <Route path="/app" element={<AppLayout />}>
        {/* relative: resolves to /app/dashboard */}
        <Route path="dashboard" element={<Dashboard />} />
        {/* absolute: resolves to /settings, ignores parent */}
        <Route path="/settings" element={<Settings />} />
      </Route>
    </Routes>
  );
}

// <Dashboard> at /app/dashboard; <Settings> at /settings

// io.thecodeforge — javascript tutorial

const Home = () => {
  return (
    <main>
      <h1>Welcome to TheCodeForge</h1>
      <p>Your source for modern React tutorials.</p>
    </main>
  );
};

export default Home;

// io.thecodeforge — javascript tutorial

const Contact = () => {
  return (
    <section>
      <h2>Contact Us</h2>
      <p>Email: team@thecodeforge.io</p>
    </section>
  );
};

export default Contact;