searchParams in next.js + 解构对象 的应用

最近项目代码学习笔记

代码片段

下面代码是 Next.js Blog 项目 Blog>src>app>blog>page.tsx 

import CardList from "@/components/CardList";
import { constants } from "buffer";
import { Menu } from "lucide-react";

import React from "react";

const Blogpage = ({
  searchParams
}: {
  searchParams: { page: number; cat: any };
}) => {
  const page = searchParams.page || 1;
  const { cat } = searchParams;
  return (
    <div className="content">
      <Menu></Menu>
      <h1 className="cat-heading">{cat} Blog</h1>
      <CardList page={page} cat={cat}></CardList>
    </div>
  );
};

export default Blogpage;

注意 ： 解构对象层级； 学会searchParams应用。

解构对象

在 JavaScript ES6中，括号 { } 通常用于解构对象，这样可以在一个对象中提取特定的属性值。在这个代码段中，BlogPage组件接受一个对象作为参数，其中包含 searchParams 这个属性。通过将 searchParams 包含在大括号 { } 中，代码表示我们要解构这个参数对象，并获取 searchParams 这个属性。

以下是使用解构的优点：

1. 简化代码：使用解构可以避免冗长的代码。例如，如果不使用解构，可能需要写 props.searchParams 这样的代码来访问对象的属性。

2. 确保代码灵活：通过解构，你可以轻松地添加其他属性而不会破坏现有代码。例如，如果将来添加其他参数到组件中，你可以通过解构快速获取新的参数。

3. 代码可读性：解构使代码更加清晰，容易理解哪些参数正在使用中。

next.js 项目中使用searchParams

在 Next.js 中，你可以使用 searchParams 来获取 URL 中的查询参数。

在 Next.js 13 及其之后的版本中，特别是使用 App Router 时，访问 searchParams 的方式与传统的 Page Router 不同。

在 Page Router 中获取 searchParams

在 Page Router 中，查询参数通常通过 useRouter 钩子来获取。示例代码如下：

import { useRouter } from 'next/router';

const MyComponent = () => {
  const router = useRouter();
  const { query } = router;

  return (
    <div>
      <h1>Search Parameters</h1>
      <pre>{JSON.stringify(query)}</pre>
    </div>
  );
};

export default MyComponent;

query 对象包含所有查询参数，例如，/example?page=2&sort=asc 将会生成 { page: "2", sort: "asc" }。

在 App Router 中获取 searchParams

在 Next.js 13 中引入了 App Router，访问 searchParams 的方式也发生了变化。在 app 目录中的组件，查询参数可以通过函数组件的参数传递。以下是一个示例：

// app/example/page.jsx
const MyComponent = ({ searchParams }) => {
  return (
    <div>
      <h1>Search Parameters</h1>
      <pre>{JSON.stringify(searchParams)}</pre>
    </div>
  );
};

export default MyComponent;

开篇项目例子就是这类

在这个示例中，searchParams 参数包含当前页面的查询参数。例如，如果 URL 为 /example?page=2&sort=asc，searchParams 将是 { page: "2", sort: "asc" }。

小结

无论是 Page Router 还是 App Router，通过 searchParams 可以获得 URL 中的查询参数。要点是：

• 在 Page Router 中，使用 useRouter 钩子来获取 query。
• 在 App Router 中，通过函数组件的参数获取 searchParams。