本文介绍了在 Next.js 13.4 版本 app 目录中如何修改和添加 URL 查询字符串。由于 app 目录下的 router.push 方法只接受字符串类型的 href 参数，因此需要手动构建查询字符串。本文提供了使用 useRouter 和 组件两种方式来添加查询字符串，并展示了如何在页面组件和客户端组件中读取这些参数。
在 Next.js 的 pages 目录中，可以通过 router.push 方法的 query 属性方便地更新 URL 的查询字符串。然而，在 Next.js 13.4 版本引入的 app 目录中，router.push 方法只接受字符串类型的 href 参数，这使得直接使用 query 属性变得不再可行。因此，我们需要采用不同的方法来修改和添加查询字符串。
构建查询字符串
在 app 目录中，我们需要手动构建查询字符串。一种常用的方法是创建一个辅助函数，该函数接受参数名和值，并返回格式化后的查询字符串。以下是一个示例：
const createQueryString = (name, value) => {
const params = new URLSearchParams();
params.set(name, value);
return params.toString();
};这个 createQueryString 函数使用 URLSearchParams 对象来构建查询字符串。URLSearchParams 提供了一种方便的方式来创建和操作 URL 的查询参数。
使用 useRouter 添加查询字符串
useRouter 是 Next.js 提供的用于访问路由器的 Hook。可以使用它来动态地导航到新的 URL，并包含我们手动构建的查询字符串。
"use client";
import { useRouter } from "next/navigation";
export default function MyComponent() {
const router = useRouter();
return (
);
}在这个例子中，当点击按钮时，router.push 会将用户导航到 /products 页面，并在 URL 中添加 sort=price 查询字符串。
使用 组件添加查询字符串
组件是 Next.js 提供的用于创建链接的组件。它也可以用于添加查询字符串。
import Link from "next/link";
export default function MyComponent() {
return (
Sort by Name
);
}在这个例子中， 组件会创建一个链接，指向 /products 页面，并在 URL 中添加 sort=name 查询字符串。
读取查询字符串
在 app 目录中，可以通过以下两种方式读取查询字符串：
-
页面组件中的 searchParams： 页面组件接收一个 searchParams 对象作为参数，该对象包含了 URL 中的查询字符串。
// app/products/page.js export default function Page({ searchParams }) { returnSort by: {searchParams.sort}; } -
客户端组件中的 useSearchParams： 客户端组件可以使用 useSearchParams Hook 来访问查询字符串。
"use client"; import { useSearchParams } from "next/navigation"; export default function Page() { const searchParams = useSearchParams(); returnSort by: {searchParams.get("sort")}; }
注意事项
- 确保在客户端组件中使用 "use client"; 指令。
- URLSearchParams 对象提供了一系列方法来操作查询参数，例如 get、set、append、delete 等。
- 在构建查询字符串时，需要对参数值进行 URL 编码，以避免出现问题。可以使用 encodeURIComponent 函数进行编码。
总结
在 Next.js app 目录中，修改和添加查询字符串需要手动构建 URL。可以使用 useRouter 和 组件来添加查询字符串，并使用 searchParams 或 useSearchParams 来读取查询字符串。 通过本文的介绍，你应该能够在 Next.js 13.4 版本的 app 目录中轻松地管理 URL 查询字符串。
