---
title: Dynamic routes
---

You often need to encode parameters in the URL path like `/post/1`, `/post/2` etc. Dynamic routes like this are handled using square brackets (`[]`). If you have a file named `/src/routes/profile/[userName].page.jsx`, for instance, and you visit `/profile/Fatih`, your page component will receive `{ userName: "Fatih" }` in `props.params` like in the example below.

<CodeViewer
  name="guide-samples"
  openFiles={["src/routes/dynamic/[userName].page.tsx"]}
  url="/dynamic/Fatih"
/>

You can use more than one dynamic parameter like `/user/[userName]/posts/[postId]`. You can even put multiple parameters in a single path segment like `/user-[name]-[surname]/contact-info` (matches `/user-fatih-aygun/contact-info` with `params: { name: "fatih", surname: "aygun" }` for instance).

More specific routes have priority over generic ones, so you can have both `/products/list` for a specific match and `/products/[productId]` as a catch-all route.

## Spread parameters and catch-all routes

You can use the `[...paramName]` syntax to match more than one segment at the end of a route. For instance, `/path/[...rest]` will match `/path/aaa/bbb/ccc/` with `params: { rest: "/aaa/bbb/ccc" }`, `/path` with `params: { rest: "" }`, and `/path/` with `params: { rest: "/" }`.

> **NOTE:** Catch-all page routes have higher priority than [API routes](/guide/api-routes) which means a catch-all page route will be matched before an API route is matched even if the latter is more specific. For example, `/foo/[...slug].page.tsx` will match `/foo/bar` before an API route `/foo/bar.api.ts` is matched. You can use a [route guard](/guide/route-guards#catch-all) to disable the page route for a specific path to make it work.
