Dynamic and Query Parameters

Overview

Pages, layouts, slots, not found pages, and error pages in dinou receive params and query props.

• params contains dynamic route segments like { id: "123" } for /blog/[id].
• query contains query parameters from the URL such as ?sort=asc.

Examples

Dynamic Parameters (params)

• /blog/[id]/page.tsx → /blog/123 passes { params: { id: "123" } }.
• /wiki/[...slug]/page.tsx → /wiki/a/b passes { params: { slug: ["a", "b"] } }.
• /blog/[[category]]/page.tsx:
  • /blog → { params: { category: undefined } }
  • /blog/tech → { params: { category: "tech" } }
• /wiki/[[...slug]]/page.tsx:
  • /wiki → { params: { slug: [] } }
  • /wiki/a/b → { params: { slug: ["a", "b"] } }

Query Parameters (query)

• /blog/123?category=tech → { query: { category: "tech" }, params: { id: "123" } }
• /search?term=react&page=2 → { query: { term: "react", page: "2" }, params: {} }
• /blog/tech?sort=asc → { query: { sort: "asc" }, params: { category: "tech" } }
• /wiki/a/b?lang=en → { query: { lang: "en" }, params: { slug: ["a", "b"] } }

Example Usage

// src/blog/[id]/page.tsx
"use client";

export default function Page({
  params,
  query,
}: {
  params: { id: string };
  query: { category: string | undefined; sort: string | undefined };
}) {
  return (
    <div>
      <h1>Blog ID: {params.id}</h1>
      <h2>Category: {query.category ?? "none"}</h2>
      <p>Sort Order: {query.sort ?? "default"}</p>
    </div>
  );
}