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.

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 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 to disable the page route for a specific path to make it work.