推荐答案
在 Next.js 中，动态路由可以通过在 pages 目录下创建带有方括号 [] 的文件名来定义。例如，创建一个文件 pages/posts/[id].js，这样就可以匹配 /posts/1、posts/2 等路径。
-- -------------------- ---- ------- -- ------------------- ------ - --------- - ---- -------------- ----- ---- - -- -- - ----- ------ - ------------ ----- - -- - - ------------- ------ -------- --------- -- ------ ------- -----
在这个例子中，id 是一个动态路由参数，可以通过 useRouter 钩子从 router.query 中获取。
本题详细解读
1. 动态路由的基本概念
动态路由允许你在 URL 中使用变量，从而根据不同的 URL 参数渲染不同的内容。Next.js 通过在 pages 目录下创建带有方括号 [] 的文件名来实现动态路由。
2. 动态路由的文件命名
在 pages 目录下，文件名中的方括号 [] 表示这是一个动态路由。例如：
pages/posts/[id].js可以匹配/posts/1、/posts/2等路径。pages/users/[username].js可以匹配/users/john、/users/jane等路径。
3. 获取动态路由参数
在动态路由组件中，你可以使用 useRouter 钩子来获取路由参数。useRouter 返回一个 router 对象，其中 query 属性包含了所有的路由参数。
-- -------------------- ---- ------- ------ - --------- - ---- -------------- ----- ---- - -- -- - ----- ------ - ------------ ----- - -- - - ------------- ------ -------- --------- -- ------ ------- -----
在这个例子中，id 是从 URL 中提取的动态参数。
4. 多段动态路由
你还可以定义多段动态路由。例如，pages/posts/[category]/[id].js 可以匹配 /posts/tech/1、/posts/life/2 等路径。
-- -------------------- ---- -------
-- ------------------------------
------ - --------- - ---- --------------
----- ---- - -- -- -
----- ------ - ------------
----- - --------- -- - - -------------
------ -
---
--------- ----------- ----- ----
----
--
--
------ ------- -----5. 可选动态路由
Next.js 还支持可选动态路由。通过在方括号内添加 ... 来表示可选参数。例如，pages/posts/[...slug].js 可以匹配 /posts/a、/posts/a/b、/posts/a/b/c 等路径。
-- -------------------- ---- ------- -- ------------------------ ------ - --------- - ---- -------------- ----- ---- - -- -- - ----- ------ - ------------ ----- - ---- - - ------------- ------ -------- --------------------- -- ------ ------- -----
在这个例子中，slug 是一个数组，包含了所有的路径片段。
6. 动态路由与静态生成
动态路由可以与 getStaticPaths 和 getStaticProps 结合使用，以实现静态生成。getStaticPaths 用于生成所有可能的路径，而 getStaticProps 用于在构建时获取数据。
-- -------------------- ---- ------- -- ------------------- ------ - --------- - ---- -------------- ------ ----- -------- ---------------- - ----- ----- - -- ------- - --- --- - -- - ------- - --- --- - --- ------ - ------ --------- ----- -- - ------ ----- -------- ---------------- ------ -- - ----- ---- - - --- ---------- ------ ----- ------------- -- ------ - ------ - ---- - -- - ----- ---- - -- ---- -- -- - ------ -------- ----------------- -- ------ ------- -----
在这个例子中，getStaticPaths 定义了所有可能的路径，getStaticProps 在构建时获取数据并传递给组件。