当前位置：首页 > 文章列表 > 文章 > 前端 > Next.js修改和添加查询参数技巧

Next.js修改和添加查询参数技巧

2025-08-07 12:39:56 0浏览收藏

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《Next.js 中修改和添加查询字符串的技巧》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

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 (
    <button
      onClick={() => {
        router.push("/posts" + "?" + createQueryString("sort", "asc"));
      }}
    >
      ASC
    </button>
  );
}

代码解释：

"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 (
    <Link href={"/posts" + "?" + createQueryString("sort", "desc")}>
      DESC
    </Link>
  );
}

代码解释：

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

读取查询参数

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

1. 通过 searchParams 属性

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

// app/posts/page.js

export default function Page({ searchParams }) {
  return <div>{searchParams.sort}</div>;
}

2. 通过 useSearchParams 函数

在任何客户端组件中，可以使用 useSearchParams 函数来获取查询参数。

"use client";

import { useSearchParams } from "next/navigation";

export default function Page() {
  const searchParams = useSearchParams();
  return <div>{searchParams.get("sort")}</div>;
}

代码解释：

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

总结

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

注意事项：