🛠️ Configuring Routes and Parameters

Beyond Basic Routes

In the previous lesson you mapped fixed paths and a single dynamic segment to components. That's plenty for a marketing site. But production apps need to answer harder questions: What if a parameter is optional? What if a URL can be arbitrarily deep, like a file path? Which route wins when two could match? How do I stop unauthenticated users from reaching the dashboard?

All of this is route configuration — teaching the router's matching engine exactly which URLs map where, and under what conditions. Getting it right is the difference between an app that feels solid and one that 404s on valid links or leaks protected pages.

Optional & Splat Parameters

Multiple dynamic segments

You can chain as many named segments as a URL needs:

<Route path="/users/:userId/posts/:postId" element={<UserPost />} />

function UserPost() {
  const { userId, postId } = useParams();
  return <h1>Post {postId} by user {userId}</h1>;
}

Optional parameters

Since React Router 6.4 you can mark a segment optional with a trailing ?. The same route then matches whether or not the segment is present:

// Matches BOTH "/users" and "/users/123"
<Route path="/users/:userId?" element={<Users />} />

function Users() {
  const { userId } = useParams();
  return userId ? <UserProfile userId={userId} /> : <UsersList />;
}

Splat (wildcard) routes

A * at the end of a path captures everything remaining, across multiple segments. It's ideal for file browsers, wikis, and docs viewers where the depth is unknown:

<Route path="/files/*" element={<FileViewer />} />

function FileViewer() {
  // The captured remainder lives under the "*" key
  const params = useParams();
  const filePath = params['*'];         // e.g. "docs/report.pdf"
  return <p>Viewing: {filePath}</p>;
}
// URL /files/docs/report.pdf  →  filePath === "docs/report.pdf"

<Route path="/docs/*" element={<DocumentViewer />} />

function DocumentViewer() {
  const docPath = useParams()['*'];
  const [doc, setDoc] = useState(null);
  const [status, setStatus] = useState('loading');

  useEffect(() => {
    const controller = new AbortController();
    (async () => {
      setStatus('loading');
      try {
        const res = await fetch(`/api/documents/${docPath}`, { signal: controller.signal });
        if (!res.ok) throw new Error('Not found');
        setDoc(await res.json());
        setStatus('ready');
      } catch (err) {
        if (err.name !== 'AbortError') setStatus('error');
      }
    })();
    return () => controller.abort();
  }, [docPath]);

  if (status === 'loading') return <p>Loading…</p>;
  if (status === 'error')   return <p>Document not found.</p>;

  return doc.type === 'folder'
    ? (
      <ul>
        {doc.contents.map(item => (
          <li key={item.name}>
            <Link to={`/docs/${docPath}/${item.name}`}>{item.name}</Link>
          </li>
        ))}
      </ul>
      )
    : <article>{doc.body}</article>;
}

Route Ranking & Order

Here's a common source of confusion. In React Router v5, routes matched strictly top-to-bottom, so order was everything. In v6, <Routes> uses a ranking algorithm: it scores every route by specificity and renders the best match regardless of source order. A static segment outranks a dynamic one, which outranks a splat.

So the following renders correctly no matter how you order the three routes — v6 picks the static /products/new for that URL, the dynamic one for /products/123, and the splat for anything deeper:

<Routes>
  <Route path="/products/*" element={<ProductCatchAll />} />
  <Route path="/products/:id" element={<ProductDetail />} />
  <Route path="/products/new" element={<NewProduct />} />
</Routes>
{/* v6 still routes /products/new → NewProduct, thanks to ranking */}

Validating Parameters

URL parameters arrive as untrusted strings. A user can hand-edit the address bar, a crawler can request nonsense, and a stale link can point at a deleted record. Validate before you use.

Convert and range-check

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

function ProductDetail() {
  const { id } = useParams();
  const numericId = Number(id);

  if (!Number.isInteger(numericId) || numericId <= 0) {
    return <p role="alert">Invalid product ID.</p>;
  }
  // …safe to use numericId
}

Redirect invalid input

When a parameter must match a format (say, a UUID), redirect to a not-found page rather than rendering a broken view. Do the redirect in an effect so you don't call navigate during render:

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

const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;

function UserProfile() {
  const { userId } = useParams();
  const navigate = useNavigate();
  const valid = UUID_RE.test(userId);

  useEffect(() => {
    if (!valid) navigate('/not-found', { replace: true });
  }, [valid, navigate]);

  if (!valid) return null; // redirecting
  // …render the profile
}

The Object-Based Data Router

Defining routes in JSX is readable but limited. For larger apps, React Router 6.4+ recommends the data router: routes are plain objects passed to createBrowserRouter, and each route can declare a loader (to fetch data before rendering) and an action (to handle form submissions). This is the same architecture Remix popularized, now built into React Router.

// router.jsx
import { createBrowserRouter } from 'react-router-dom';
import RootLayout from './layouts/RootLayout';
import Home from './pages/Home';
import Products from './pages/Products';
import ProductDetail from './pages/ProductDetail';
import NotFound from './pages/NotFound';

// A loader runs before the route renders; its return value feeds useLoaderData
async function productsLoader() {
  const res = await fetch('/api/products');
  if (!res.ok) throw new Response('Failed to load products', { status: res.status });
  return res.json();
}

async function productLoader({ params }) {
  const res = await fetch(`/api/products/${params.productId}`);
  if (!res.ok) throw new Response('Not found', { status: 404 });
  return res.json();
}

export const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    errorElement: <NotFound />,   // catches thrown responses/errors below
    children: [
      { index: true, element: <Home /> },
      { path: 'products', element: <Products />, loader: productsLoader },
      { path: 'products/:productId', element: <ProductDetail />, loader: productLoader },
    ],
  },
]);

// main.jsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import { router } from './router';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <RouterProvider router={router} />
  </StrictMode>
);

Components read loader data with useLoaderData — no useEffect, no loading flags, no race conditions. The router fetches before rendering and shows the errorElement if the loader throws:

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

export default function Products() {
  const products = useLoaderData(); // already fetched by productsLoader
  return (
    <ul>
      {products.map(p => (
        <li key={p.id}><Link to={`/products/${p.id}`}>{p.name}</Link></li>
      ))}
    </ul>
  );
}

Generating routes dynamically

Because routes are just data, you can build them programmatically — for example, one route per category:

const categories = ['electronics', 'clothing', 'books'];

const categoryRoutes = categories.map(name => ({
  path: `category/${name}`,
  element: <CategoryPage category={name} />,
}));

const children = [
  { index: true, element: <Home /> },
  ...categoryRoutes,
  { path: '*', element: <NotFound /> },
];

Protected Routes & Guards

Most apps restrict some pages to signed-in users, and some to specific roles. The classic pattern is a small guard component that checks auth state and either renders its children or redirects with <Navigate>.

// components/ProtectedRoute.jsx
import { Navigate, useLocation } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';

export default function ProtectedRoute({ children }) {
  const { user } = useAuth();
  const location = useLocation();

  if (!user) {
    // Remember where they were headed so login can send them back
    return <Navigate to="/login" state={{ from: location }} replace />;
  }
  return children;
}

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/login" element={<Login />} />
  <Route
    path="/dashboard"
    element={
      <ProtectedRoute>
        <Dashboard />
      </ProtectedRoute>
    }
  />
</Routes>

After login, read location.state?.from to bounce the user back to their original destination:

function Login() {
  const navigate = useNavigate();
  const location = useLocation();
  const from = location.state?.from?.pathname ?? '/dashboard';

  async function handleSubmit(e) {
    e.preventDefault();
    await signIn(/* … */);
    navigate(from, { replace: true });
  }
  // …
}

Role-based guards

Extend the same idea to check roles, redirecting to an "unauthorized" page when the user is logged in but lacks permission:

function RoleRoute({ children, allow }) {
  const { user } = useAuth();
  const location = useLocation();

  if (!user) return <Navigate to="/login" state={{ from: location }} replace />;

  const permitted = allow.some(role => user.roles.includes(role));
  if (!permitted) return <Navigate to="/unauthorized" replace />;

  return children;
}

// Usage
<Route path="/admin" element={<RoleRoute allow={['admin']}><AdminDashboard /></RoleRoute>} />
<Route path="/reports" element={<RoleRoute allow={['admin', 'analyst']}><Reports /></RoleRoute>} />

Hands-on Exercise

import { BrowserRouter, Routes, Route, Navigate, useLocation, useNavigate, useParams } from 'react-router-dom';
import { createContext, useContext, useState } from 'react';

const AuthContext = createContext(null);
const useAuth = () => useContext(AuthContext);

function ProtectedRoute({ children }) {
  const { user } = useAuth();
  const location = useLocation();
  return user ? children : <Navigate to="/login" state={{ from: location }} replace />;
}

function PostById() {
  const n = Number(useParams().postId);
  if (!Number.isInteger(n) || n <= 0) return <p role="alert">Invalid post id.</p>;
  return <h1>Post #{n}</h1>;
}

function Login() {
  const { setUser } = useAuth();
  const navigate = useNavigate();
  const from = useLocation().state?.from?.pathname ?? '/dashboard';
  return (
    <button onClick={() => { setUser({ name: 'Ray' }); navigate(from, { replace: true }); }}>
      Log in
    </button>
  );
}

export default function App() {
  const [user, setUser] = useState(null);
  return (
    <AuthContext.Provider value={{ user, setUser }}>
      <BrowserRouter>
        <Routes>
          <Route path="/blog" element={<h1>All posts</h1>} />
          <Route path="/blog/id/:postId" element={<PostById />} />
          <Route path="/blog/:slug" element={<h1>Post by slug</h1>} />
          <Route path="/login" element={<Login />} />
          <Route path="/dashboard" element={<ProtectedRoute><h1>Dashboard</h1></ProtectedRoute>} />
        </Routes>
      </BrowserRouter>
    </AuthContext.Provider>
  );
}

Best Practices

Summary & Quiz

📚 Further Reading

• Route configuration reference
• createBrowserRouter & the data router
• Route loaders
• The Navigate component

🚀 What's Next?

Next: Nested Routes and Layout Patterns, where the <Outlet> component lets parent routes wrap children in shared layouts — the cleanest way to apply that layout-level guard we just mentioned.