当我们在使用 Next.js 开发应用的时候，获取参数是非常常见的操作之一。Next.js 提供了多种方法来获得参数，每种方法都有其自己的场景和使用方式。在本文中，我们将探讨这些方法以及如何选择最适合自己的方法来获取参数。
从 URL 中获取参数
当我们在使用 Next.js 的路由系统时，我们可以通过 URL 来获取参数。例如，在访问 https://example.com/post/123 的时候，我们想要获取 123 这个参数。使用 Next.js，我们可以这样做：
import { useRouter } from 'next/router';
function Post() {
const router = useRouter();
const { id } = router.query;
return <h1>Post: {id}</h1>;
}在这里，我们使用了 Next.js 提供的 useRouter 钩子来获取当前页面的 URL。router.query 属性包含了所有从 URL 中解析出的参数，我们通过解构赋值的方式来获得这个参数。
需要注意的是，useRouter 钩子是异步的，所以我们需要在组件内部进行条件渲染来确保获取参数后再进行展示。
从 Query String 中获取参数
我们可以从 Query String 中获取参数，这是通过在 URL 上添加 ? 字符，然后键值对的方式传递的参数。例如：
https://example.com/post?id=123&category=article
在这里，我们想要获取 id 参数和 category 参数。使用 Next.js，我们可以这样做：
-- -------------------- ---- -------
------ - --------- - ---- --------------
-------- ------ -
----- ------ - ------------
----- - --- -------- - - -------------
------ -
-----
------- ---------
------------- ---------------
------
--
-router.query 属性可以直接获取 Query String 中的参数，我们可以通过解构赋值的方式来获取多个参数。
从动态路由中获取参数
我们还可以从动态路由参数中获取参数，例如：
-- -------------------- ---- -------
-- ------------------
-------- ------ -- -- -
------ --------- ----------
-
------ ----- -------- ---------------- -
------ -
------ -- ------- - --- --- - -- - ------- - --- --- - ---
--------- ------
--
-
------ ----- -------- ---------------- ------ -- -
------ -
------ -
--- ----------
--
--
-
------ ------- -----在这个例子中，我们使用了动态路由参数来声明 /post/:id 这样的路由规则，同时，getStaticPaths 和 getStaticProps 钩子函数负责获取动态参数以及页面预渲染。组件的 props 中包含了这个动态参数，我们可以直接从 props 中获取这个参数。
从 Context 中获取参数
我们还可以从 Next.js 的 Context 中获取参数，这种方式通常用于获取应用级别的参数。例如：
import { useContext } from 'react';
import MyContext from '../components/my-context';
function MyComponent() {
const ctx = useContext(MyContext);
return <h1>Hello, {ctx.name}</h1>;
}在这个例子中，我们使用了 useContext 钩子来获取 MyContext 上下文中的值。MyContext 的值通常在应用的父组件中设置，我们可以在子组件中使用它来获取应用级别的参数。
结论
Next.js 提供了多种方法来获取参数，每种方法都有其自己的场景和使用方式。如果我们需要从 URL 或 Query String 中获取参数，我们可以使用 useRouter 钩子来获取。如果我们需要从动态路由参数中获取参数，我们可以从组件的 props 中获取。如果我们需要获取应用级别的参数，我们可以使用 Context 来获取。在应用中选择最适合自己的方式来获取参数可以让我们的代码更加清晰和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6719b5baad1e889fe2331331