Concept

Dynamic segments

A route like /orders/:id matches any id and hands it to the component as a parameter. The URL becomes the source of truth for which record is shown.

What a session covers

The tutor works through these with you, in conversation and code. A session ends when you have shown them, not when a video does.

Explain how /orders/:id reaches the component as a parameter
Load the record named by the URL and show it
Spot the state that keeps the old record when the id changes

In practice

A few lines that show Dynamic segments doing its job.

TSX

{ path: "/orders/:id", element: <OrderPage /> }

function OrderPage() {
  const { id } = useParams<{ id: string }>();
  const order = useOrder(id!);
  if (!order) return <NotFound />;
  return <h1>Order {order.number}</h1>;
}

The common mistake

Watch for

Caching the loaded record in state keyed by nothing. Navigating from /orders/1 to /orders/2 reuses the component, and without reacting to the id change it keeps showing order 1.

What to know first

Your roadmap puts these before Dynamic segments, unless you already know them.

Routes and links

How it stays learned

Once a session shows you understand Dynamic segments, it comes back for review. Each review takes a minute and tells the memory model how well you still know it.

Day 3First recall, while it is fresh
Day 7Second, a week on
Day 18Last, when it has settled

Previous in the module← Routes and links

Next in the moduleLayouts →