在 Next.js 中，动态路由是一个非常有用的功能。它允许我们根据路由参数动态生成页面，这在构建动态应用程序时非常有用。本文将介绍 Next.js 中动态路由的使用姿势，包括如何设置和使用动态路由以及如何处理路由参数。
设置动态路由
在 Next.js 中设置动态路由的方式非常简单，只需要在页面的文件名中添加一对方括号即可。例如，如果你想创建一个动态路由来显示某个用户的个人资料页面，可以将文件名设置为 [username].js。当用户访问 https://example.com/username1 时，Next.js 将会渲染 username1.js 文件中的内容。
使用动态路由
使用动态路由也非常简单。首先，在动态路由的页面组件中，我们需要导入 useRouter 钩子。这个钩子包含了关于当前路由的信息，我们可以使用它来获取路由参数。
-- -------------------- ---- ------- ------ - --------- - ---- -------------- -------- ------ - ----- ------ - ------------ ----- - -- - - ------------- ------ --------- ---------- - ------ ------- -----
在上面的代码中，我们首先导入了 useRouter 钩子。然后，我们调用 useRouter 钩子来获取当前路由的信息，然后使用 query 属性来获取路由参数。在上面的示例中，我们只有一个路由参数 id，如果你的动态路由包含更多的参数，你也可以使用相同的方式来获取它们。
处理路由参数
获取路由参数后，我们可以根据参数来显示不同的内容。例如，在上面的示例中，我们可以使用 id 参数来显示不同的文章内容。
-- -------------------- ---- -------
------ - --------- - ---- --------------
----- ----- - -
- --- -- ------ ------ ------ -------- ----- -- -- ----- ------ --
- --- -- ------ ------- ------ -------- ----- -- -- ------ ------ --
--
-------- ------ -
----- ------ - ------------
----- - -- - - -------------
----- ---- - -------------- -- ---- --- ----
------ -
-----
---------------------
---------------------
------
--
-
------ ------- -----在上面的示例中，我们首先定义了一个包含两篇文章的 posts 数组。然后，在 Post 组件中，我们根据路由参数 id 查找对应的文章，并显示它的标题和内容。
另外，我们可以使用 getStaticPaths 来定义预渲染时需要动态渲染的路径参数。示例如下：
export const getStaticPaths = async () => {
const paths = [{ params: { id: '1' } }, { params: { id: '2' } }];
return { paths, fallback: false };
};在上面的示例中，我们定义了两个路径参数 1 和 2，然后将其作为对象放入 paths 数组中。在 fallback 属性中定义了 false 表示，如果请求了一个不存在的动态路由，不会执行客户端渲染，返回 404。
总结
本文介绍了 Next.js 中动态路由的使用姿势。我们首先介绍了如何设置动态路由，然后详细讲解了如何使用和处理路由参数。最后，我们还介绍了如何使用 getStaticPaths 来定义预渲染时需要动态渲染的路径参数。希望本文对你了解 Next.js 中动态路由的使用有所指导和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64acc32f48841e98948c4f66