本文介绍了在 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.jsexport default function Page({ searchParams }) { return Sort by: {searchParams.sort};}
客户端组件中的 useSearchParams： 客户端组件可以使用 useSearchParams Hook 来访问查询字符串。
"use client";import { useSearchParams } from "next/navigation";export default function Page() { const searchParams = useSearchParams(); return Sort 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 查询字符串。
以上就是在 Next.js App 目录中修改和添加查询字符串的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1510822.html
微信扫一扫 
支付宝扫一扫 
