Dynamic routes

🚧 Only available for SSR apps. This feature will be soon available also for static generated apps.

When the exact segment names are not known in advance and you need to generate routes from dynamic data, you can use dynamic segments, which are populated at request time.

Convention

A dynamic segment can be created by wrapping a file or a folder name in square brackets: [segmentName].

The dynamic segment can be used in folders as well as file names:

src/routes/blog/[slug].tsx
src/routes/blog/[slug]/index.tsx

A path can contain multiple dynamic segments, allowing for more flexible routing:

src/routes/blog/[post]/[comment].tsx

Example

Assuming you're working on a blog with multiple posts, you can use a dynamic segment to define the post page: src/routes/blog/[slug].tsx.

The [slug] is the dynamic segment which will be used to identify individual blog posts.

import { useRouter } from 'tuono'

export default function Page() {
  const router = useRouter()
  return <p>Post: {router.pathname}</p>
}

Catch all segments

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

Given the following src/routes/shop/[...slug].tsx, the following paths will be matched:

/shop/clothes
/shop/clothes/tops
/shop
/shop/clothes/tops/t-shirts
and so on.

Edit page