Dinou logoDinou
docs v5
npmGitHub

Route Parameters

Understand how dynamic URL segments (params) are propagated as arguments and props throughout the Dinou lifecycle.

Overview

When a dynamic route containing bracket notation (e.g. src/blog/[slug]/page.tsx) is visited, Dinou extracts the dynamic segments from the URL path. The parsed parameters dictionary is then passed down to two main entry points: Page Functions (server-side data fetching and validation functions) and React Components (props during the rendering cycle).

1. As arguments to Page Functions (page_functions.ts)

Inside a route's page_functions.ts (or .js) file, the params object is passed as the first and only argument to both data-fetching and validation functions.

getProps(params)

Retrieves data on the server before the page component mounts. The returned props are merged and passed to the Page.

// src/blog/[slug]/page_functions.ts
export async function getProps(params) {
  // params is the raw object: { slug: "my-post" }
  const post = await db.getPost(params.slug);
  return {
    page: { post }
  };
}
validateParams(params)

Validates route parameters at request time or build time. Returning false aborts rendering and returns a 404 response.

// Validate that ID is strictly numeric
export function validateParams(params) {
  return /^\d+$/.test(params.id);
}

2. As Component properties (props.params)

During the rendering phase, Dinou injects the params dictionary directly into the props of the active route components:

Pages (page.tsx)

The page component receives the params as a prop. Accessible in both Server and Client Components:

export default function Page({ params }) { return <h1>Post: {params.slug}</h1>; }
Layouts (layout.tsx)

Layouts also receive params, enabling layouts to read dynamic segments belonging to their route branch:

export default function Layout({ children, params }) { return <section>{children}</section>; }
Errors (error.tsx)

Error boundaries receive params to present helpful contextual debugging information to users:

export default function Error({ error, params }) { return <p>Failed loading post {params.id}</p>; }
Not Found (not_found.tsx)

Allows rendering customized 404 pages using the parameters extracted from the unmatched path:

export default function NotFound({ params }) { return <p>User {params.userId} does not exist</p>; }