什么是动态路由
在 Next.js 中，路由指的是页面之间的跳转方式。例如，我们可以通过点击不同的链接或按钮来跳转到不同的页面。而动态路由则是指在路由路径中插入参数，让页面可以根据这些参数来动态生成内容。
下面是一个使用动态路由的例子：
/posts/[postId].js
上述路由中的 [postId] 就是动态参数，它可以匹配任何数字、字母或组合。当用户访问网址 /posts/123 时，就会根据 [postId] 参数动态生成对应的页面内容。而当用户访问网址 /posts/foo 时，Next.js 将会显示 404 页面。
如何使用动态路由
在 Next.js 中，使用动态路由非常简单。只需要在 pages 文件夹下创建一个以中括号包裹动态参数的文件，就可以使用动态路由了。
例如，我们要创建一个可以根据文章 ID（postId）来展示文章内容的页面，可以在 pages 文件夹下创建一个 posts 文件夹，然后在 posts 文件夹中创建一个名为 [postId].js 的文件，如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- --------------
----- ---- - -- -- -
----- ------ - ------------
----- - ------ - - -------------
------ -
-----
-------- -------------
------- -- --- ------- --- ---- -------------
------
--
--
------ ------- -----上述代码中，我们首先引入了 useRouter 从 next/router 中。然后，我们从 router.query 中获取了 postId 参数，并在页面中渲染了对应的内容。
当用户访问 /posts/123 时，就会显示对应的内容。而当用户访问 /posts/foo 时，Next.js 将会显示 404 页面。
如何处理多个动态参数
有时候，我们需要处理多个动态参数。例如，我们可能需要根据作者 ID 和文章 ID 来展示文章内容。此时，我们需要在路由路径中添加多个动态参数。
例如，我们可以创建一个名为 [authorId] 的文件夹，并在其中再创建一个名为 [postId].js 的文件，来处理这个场景：
/posts/[authorId]/[postId].js
上述路由中有两个动态参数：[authorId] 和 [postId]。当用户访问网址 /posts/123/456 时，就会根据这两个参数动态生成对应的页面内容。
我们可以在 pages 文件夹下创建一个 posts 文件夹，然后在 posts 文件夹中再创建一个名为 [authorId] 的文件夹，最后在 [authorId] 文件夹中创建一个名为 [postId].js 的文件，如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- --------------
----- ---- - -- -- -
----- ------ - ------------
----- - --------- ------ - - -------------
------ -
-----
-------- -------- -- ------ ---------------
------- -- --- ------- --- ---- -------- -- ------ ---------------
------
--
--
------ ------- -----上述代码中，我们从 router.query 中获取了 authorId 和 postId 参数，并在页面中渲染了对应的内容。
当用户访问 /posts/123/456 时，就会显示对应的内容。而当用户访问 /posts/foo/bar 时，Next.js 将会显示 404 页面。
如何使用 getStaticPaths 和 getStaticProps
在有些情况下，我们可能需要在生成静态 HTML 页面时动态地生成路由。例如，我们可能需要在页面中展示某个作者的所有文章，或者在页面中展示所有文章的分类。
此时，我们就可以使用 getStaticPaths 和 getStaticProps 方法来动态生成路由和页面内容。
getStaticPaths
getStaticPaths 方法用于定义动态路由的路径。它应该在 SSR 时执行，以提前为页面构建预期的路由。
例如，我们可以在 pages 文件夹下创建一个名为 [category].js 的文件夹，然后在其中定义一组分类，最后通过 getStaticPaths 方法动态生成路由：
-- -------------------- ---- -------
------ ----- -------- ---------------- -
----- ---------- - -------- ------- -------------
----- ----- - ------------------------- -- --
------- - -------- --
----
------ - ------ --------- ----- --
-上述代码中，我们定义了一组分类：news、tech 和 lifestyle。然后，我们使用 map 方法将这些分类转化为路由对象（例如，{ params: { category: 'news' } }），并将其返回。
getStaticProps
getStaticProps 方法用于在构建过程中获取数据，并将其作为 props 传递给页面。
例如，我们可以通过 getStaticProps 方法获取某个作者的所有文章，然后在页面中展示：
export async function getStaticProps({ params }) {
const { authorId } = params;
const posts = await fetchPostsByAuthorId(authorId);
return { props: { posts } };
}上述代码中，我们首先从 params 中获取了 authorId 参数。然后，我们通过 fetchPostsByAuthorId 方法获取该作者的所有文章，并将其作为 props 传递给页面。
总结
动态路由可以让我们轻松地在 Next.js 中实现动态生成页面的功能。我们可以通过在路由路径中添加动态参数，让页面根据这些参数来动态生成内容。同时，我们还可以使用 getStaticPaths 和 getStaticProps 方法来动态生成路由和页面内容，实现更加复杂的业务需求。
希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6643feabd3423812e41ea81e