← Lessons

quiz vs the machine

Silver1110

Frontend

Dynamic Route Params

Capture variable path segments like an id and read them inside the matched view.

4 min read · intro · beat Silver to climb

What they are

Dynamic route params let one route definition match many URLs by marking a segment as a variable. A pattern like users colon id matches users 7 and users 42, capturing the value as a named param.

Reading the value

  • The router parses the URL and exposes params to the matched component.
  • The component reads the id and fetches the matching record.
  • Changing only the param often reuses the same component instance.

Static versus dynamic

  • A static segment must match exactly, like settings.
  • A dynamic segment matches any value and binds it to a name.
  • An optional or catch all segment can match zero or many parts.

A gotcha

When navigating from users 7 to users 9 the component may not unmount. You must watch the param so data refetches when it changes, otherwise stale content lingers.

Why it matters

Dynamic params turn an unbounded set of resources into a single declarative route, keeping URLs shareable and bookmarkable.

Key idea

A dynamic segment captures a variable part of the path as a named param, letting one route serve many resources.

Check yourself

Answer to earn rating on the learn ladder.

1. What does a pattern like users colon id match?

2. Why can stale data appear when navigating between two ids?