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

本文介绍了在 Next.js 13.4 版本 app 目录中如何修改和添加 URL 查询字符串。由于 app 目录下的 router.push 方法只接受字符串类型的 href 参数，因此需要手动构建查询字符串。本文提供了使用 useRouter 和 <Link> 组件两种方式来添加查询字符串，并展示了如何在页面组件和客户端组件中读取这些参数。

在 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 (
    <button
      onClick={() => {
        router.push("/products?" + createQueryString("sort", "price"));
      }}
    >
      Sort by Price
    </button>
  );
}

在这个例子中，当点击按钮时，router.push 会将用户导航到 /products 页面，并在 URL 中添加 sort=price 查询字符串。

使用 <Link> 组件添加查询字符串

<Link> 组件是 Next.js 提供的用于创建链接的组件。它也可以用于添加查询字符串。

图改改

在线修改图片文字

455

查看详情

import Link from "next/link";

export default function MyComponent() {
  return (
    <Link href={"/products?" + createQueryString("sort", "name")}>
      Sort by Name
    </Link>
  );
}

在这个例子中，<Link> 组件会创建一个链接，指向 /products 页面，并在 URL 中添加 sort=name 查询字符串。

读取查询字符串

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

• 页面组件中的 searchParams： 页面组件接收一个 searchParams 对象作为参数，该对象包含了 URL 中的查询字符串。

  // app/products/page.js
  
  export default function Page({ searchParams }) {
    return <div>Sort by: {searchParams.sort}</div>;
  }

  登录后复制

• 客户端组件中的 useSearchParams： 客户端组件可以使用 useSearchParams Hook 来访问查询字符串。

  "use client";
  
  import { useSearchParams } from "next/navigation";
  
  export default function Page() {
    const searchParams = useSearchParams();
    return <div>Sort by: {searchParams.get("sort")}</div>;
  }

  登录后复制

注意事项

• 确保在客户端组件中使用 "use client"; 指令。
• URLSearchParams 对象提供了一系列方法来操作查询参数，例如 get、set、append、delete 等。
• 在构建查询字符串时，需要对参数值进行 URL 编码，以避免出现问题。可以使用 encodeURIComponent 函数进行编码。

总结

在 Next.js app 目录中，修改和添加查询字符串需要手动构建 URL。可以使用 useRouter 和 <Link> 组件来添加查询字符串，并使用 searchParams 或 useSearchParams 来读取查询字符串。 通过本文的介绍，你应该能够在 Next.js 13.4 版本的 app 目录中轻松地管理 URL 查询字符串。

以上就是在 Next.js App 目录中修改和添加查询字符串的详细内容，更多请关注php中文网其它相关文章！