本文介绍了在 Next.js 13.4 版本中，如何在 app 目录下修改和添加 URL 查询字符串。由于 app 目录下的 router.push 方法只接受字符串类型的 href 参数，因此需要手动构建查询字符串。文章提供了使用 useRouter 和 组件的示例代码，并展示了如何通过 searchParams 属性或 useSearchParams 函数来读取查询参数。
在 Next.js 的 app 目录中，与 pages 目录不同，router.push 方法只接受一个字符串类型的 href 参数。这意味着你需要手动构建包含查询字符串的 URL，才能实现修改和添加查询参数的功能。以下将详细介绍如何使用 useRouter 和 组件来完成此操作，并说明如何读取这些参数。
使用 useRouter 修改查询字符串
useRouter 是 Next.js 提供的用于在客户端进行路由操作的 Hook。要使用它来修改查询字符串，你需要创建一个函数来构建包含查询参数的字符串。
"use client";import { useRouter } from "next/navigation";export default function ExampleClientComponent() { const router = useRouter(); const createQueryString = (name, value) => { const params = new URLSearchParams(); params.set(name, value); return params.toString(); }; return ( );}
代码解释：
“use client”;：声明这是一个客户端组件。useRouter()：获取 router 对象，用于进行路由操作。createQueryString(name, value)：该函数接收参数名 name 和参数值 value，创建一个 URLSearchParams 对象，设置参数，并返回查询字符串。router.push(“/posts” + “?” + createQueryString(“sort”, “asc”))：点击按钮时，调用 router.push 方法，传入包含查询字符串的 URL。
使用 组件修改查询字符串
组件是 Next.js 提供的用于创建链接的组件。使用它修改查询字符串的方式与 useRouter 类似，也需要手动构建包含查询参数的 URL。
"use client";import Link from "next/link";export default function ExampleClientComponent() { const createQueryString = (name, value) => { const params = new URLSearchParams(); params.set(name, value); return params.toString(); }; return ( DESC );}
代码解释：
Link 组件的 href 属性设置为包含查询字符串的 URL。
读取查询参数
在 app 目录中，可以通过以下两种方式读取查询参数：
1. 通过 searchParams 属性
在页面组件中，Next.js 会将查询参数作为 searchParams 属性传递给组件。
// app/posts/page.jsexport default function Page({ searchParams }) { return {searchParams.sort};}
2. 通过 useSearchParams 函数
在任何客户端组件中，可以使用 useSearchParams 函数来获取查询参数。
"use client";import { useSearchParams } from "next/navigation";export default function Page() { const searchParams = useSearchParams(); return {searchParams.get("sort")};}
代码解释：
useSearchParams()：获取 searchParams 对象，用于读取查询参数。searchParams.get(“sort”)：获取名为 “sort” 的查询参数的值。
总结
在 Next.js 的 app 目录中，由于 router.push 方法的限制，需要手动构建包含查询字符串的 URL 来修改和添加查询参数。可以使用 useRouter 和 组件来实现此操作。读取查询参数可以使用页面组件的 searchParams 属性或客户端组件的 useSearchParams 函数。
注意事项：
URLSearchParams 对象提供了一系列方法用于操作查询参数，例如 append, delete, has 等。确保在客户端组件中使用 “use client”; 指令。使用 useSearchParams 时，需要确保组件是客户端组件。
以上就是Next.js App 目录中修改和添加查询字符串的方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1510820.html
微信扫一扫 
支付宝扫一扫 
