Next.js App 目录中修改和添加查询字符串的方法

本文介绍了在 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 (
     {
        router.push("/posts" + "?" + createQueryString("sort", "asc"));
      }}
    >
      ASC
    
  );
}

代码解释：

1. "use client";：声明这是一个客户端组件。
2. useRouter()：获取 router 对象，用于进行路由操作。
3. createQueryString(name, value)：该函数接收参数名 name 和参数值 value，创建一个 URLSearchParams 对象，设置参数，并返回查询字符串。
4. 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
    
  );
}

代码解释：

1. Link 组件的 href 属性设置为包含查询字符串的 URL。

读取查询参数

在 app 目录中，可以通过以下两种方式读取查询参数：

知识画家

AI交互知识生成引擎，一句话生成知识视频、动画和应用

下载

1. 通过 searchParams 属性

在页面组件中，Next.js 会将查询参数作为 searchParams 属性传递给组件。

// app/posts/page.js

export 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")}
;
}

代码解释：

1. useSearchParams()：获取 searchParams 对象，用于读取查询参数。
2. searchParams.get("sort")：获取名为 "sort" 的查询参数的值。

总结

在 Next.js 的 app 目录中，由于 router.push 方法的限制，需要手动构建包含查询字符串的 URL 来修改和添加查询参数。可以使用 useRouter 和 组件来实现此操作。读取查询参数可以使用页面组件的 searchParams 属性或客户端组件的 useSearchParams 函数。

注意事项：

• URLSearchParams 对象提供了一系列方法用于操作查询参数，例如 append, delete, has 等。
• 确保在客户端组件中使用 "use client"; 指令。
• 使用 useSearchParams 时，需要确保组件是客户端组件。