NextJS基础#

export default function Page({ params, searchParams }: PageProps) {
  console.log(params);
  // 1.目录: app/[lang]/post/[id]/page.tsx
  // 1.路由: /en/post/88
  // 1.params: { lang: "en", id: "88" }
  
  // 2.目录: app/docs/[...slug]/page.tsx
  // 2.路由: /docs/a/b/c
  // 2.params: { slug: ["a", "b", "c"] }

  // 3.目录: app/docs/[[...slug]]/page.tsx
  // 3.路由: /docs
  // 3.params: { slug: undefined }
  // 3.路由: /docs/a/b
  // 3.params: { slug: ["a", "b"] }

  // 4.目录: app/[lang]/[...rest]/page.tsx
  // 4.路由: /zh/news/2026/02
  // 4.params: { lang: "zh", rest: ["news", "2026", "02"] }
}

export default function Page({ params, searchParams }: PageProps) {
  console.log(searchParams);
  // 1.路由: /search?q=hello&page=2
  // 1.params: { q: "hello", page: "2" }

  // 1.路由: /list?tag=js&tag=react
  // 1.params: { tag: ["js","react"] }
}

import { useRouter } from "next/navigation";
const router = useRouter();
function goSearch() {
    const params = new URLSearchParams({
        q: "hello world",
        page: "1"
    });
    // 增加参数示例
    params.set('tag', "前端")
    // /search?q=hello+world&page=1&tag=%E5%89%8D%E7%AB%AF
    router.push(`/search?${params}`);
}

<Link
    href={{
        pathname: "/search",
        query: {
            q: "hello world",
            page: 1
        }
    }}
>
    搜索
</Link>
// 但还是更推荐下面的写法
<Link href={`/search?${params}`}>

type PageProps = {
    params: { [key: string]: string };
    searchParams: { [key: string]: string | string[] | undefined };
};
export default function Page({ params, searchParams }: PageProps) { }
export default function Layout({ params, children }) { }
export default function Template({ params, children }) { }