Dynamic Routes

Convention

A Dynamic Segment can be created by wrapping a folder's name in square brackets: [folderName]. For example, [id] or [slug].

Dynamic Segments are passed as the params prop to layout and page.

Example

For example, a blog could include the following route /src/routes/blog/[slug]/page.js where [slug] is the Dynamic Segment for blog posts.

import { type PageProps } from "another-react-router"
 
export default function Page({ params }: PageProps) {
	return <div>My Post: {params.slug}</div>
}

Catch-all Segments

Dynamic Segments can be extended to catch-all subsequent segments by adding an ellipsis inside the brackets [...folderName].

For example, /src/routes/shop/[...slug]/page.js will match /shop/clothes, but also /shop/clothes/tops, /shop/clothes/tops/t-shirts, and so on.

TypeScript

When using TypeScript, you can add types for params depending on your configured route segment.

export default function Page({ params }: { params: { slug: string } }) {
	return <h1>My Page</h1>
}

Or just use type from package

import { type PageProps } from "another-react-router"
 
export default function Page({ params }: PageProps) {
	return <div>My Post: {params.slug}</div>
}