如何使用 nextjs 13 进行动态路由？

Question

我们如何在 nextjs 13 中使用布局进行动态路由？

我在新的下一页应用程序中有一个目录，我在其中尝试进行动态路由：app/dashboard/[id].jsx，但是它不适用于仪表板布局。

我该怎么做？普通页面的工作方式是这样的app/dashboard/pages.jsx，但是我们如何做动态路由，在其中我也可以获得 id 呢？

Answer 1

https://nextjs.org/docs/app/api-reference/file-conventions/page

所以：app/dashboard/[id]/page.jsx

你的Page函数可以接受一个params参数：

export default function Page({ params, searchParams }) {
    return <div>ID: {params.id}</div>
}

Answer 2

在最新App Router的 Nextjs中13.4，可以通过以下方式完成。

\n

概括

\n

\n

1. 单个参数 ( blog/123)

   \n
   \n
   • 使用：[blogId]
   \n
   \n
\n

2. 多个参数 ( blog/a/b)

   \n
   \n
   • 使用：[...blogId]
   \n
   \n
\n

3. 可选参数（blog/或blog/a）

   \n
   \n
   • 使用：[[...blogId]]
   \n
   \n
\n

\n

\n

\xe2\x9a\xa0 注意：不能同时使用可选参数和多个参数

\n\n

调用

\n

\nexport default function Home() {\n    return (\n        <div className="flex flex-col gap-4">\n            <Link href={"/blog/123"} className="bg-green-400 w-fit rounded-lg p-4">\n                Single param\n            </Link>\n            <Link href={"blog/a/b"} className="bg-blue-400 w-fit rounded-lg p-4">\n                Multiple Params\n            </Link>\n            <Link href={"blog"} className="bg-amber-400 w-fit rounded-lg p-4">\n                Optional\n            </Link>\n        </div>\n    );\n}\n

\n

接收

\n

\n

1. 单参数

   \n

   export default function BlogPost({ params }: { params: { blogId: string } }) {\n return <h1>{params.blogId}</h1>;\n} \n\n

   \n
\n

2. 多个参数

   \n

   export default function BlogPost({ params }: { params: { blogId: string[] } }) {\n console.log(params);\n return (\n     <div className="">\n         {params.blogId[0]}\n         {params.blogId[1]}\n     </div>\n  );\n}\n

   \n
\n

\n

另请参阅最新的 Nextjs 13 代码模板\n Next.js 13+ Power Snippets | TypeScript/Javascript

\n

它包含广泛的代码片段，适用于ts和js. 在这里查找所有片段

\n\n

有用的链接：

\n

\n

• 获取 URL 参数 (Next.js 13)

  \n
\n

• Nexjs 动态路由

  \n
\n

\n