如何在页面之间分页并仍然保留 Nextjs 的 URL 参数？

Question

import Link from "next/link";
import React from "react";
import { Button } from "../ui/button";
import { Card, CardContent } from "../ui/card";
import { cn } from "@/lib/utils";
import { ChevronLeft, ChevronRight, Ellipsis } from "lucide- 
react";
import { usePathname, useSearchParams } from "next/navigation";

type Props = {
  currentPage: number;
  count: number;
  perPage: number;
};

const Pagination = async ({ currentPage, count, perPage }: Props) => {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const params = new URLSearchParams(searchParams);
  const totalPages = Math.ceil(count / perPage);
  const pages = [];
  const offset = 1;
  for (let i = currentPage - offset; i <= currentPage + offset; i++) {
    if (i >= 1 && i <= totalPages) {
      pages.push(i);
    }
  }
  await new Promise((resolve) => {
    setTimeout(() => {
      resolve(undefined);
    });
  });
  if (totalPages === 1) return null;
  return (
    <div className="px-[2.5%]">
      <Card className=" w-fit rounded-xl mx-auto">
        <CardContent className="flex items-center justify-center gap-2 p-2 ">
          {currentPage > 1 ? (
            <Link
              href={{
                pathname: "/components",
                query: {
                  page: currentPage - 1,
                },
              }}
            >
              <Button variant="ghost" className="w-10 h-10">
                <ChevronLeft className="w-5 h-5 shrink-0" />
              </Button>
            </Link>
          ) : null}
          {typeof count === "number" && (
            <div className="flex items-center gap-2">
              {pages.map((page, idx) => {
                return (
                  <Link
                    key={idx}
                    href={{
                      pathname: "/components",
                      query: {
                        page,
                      },
                    }}
                  >
                    <Button
                      variant="outline"
                      className={cn(
                        "w-10 h-10 flex items-center justify-center rounded-lg",
                        page === currentPage
                          ? "bg-accent border-accent"
                          : "bg-transparent"
                      )}
                      size="sm"
                    >
                      {page}
                    </Button>
                  </Link>
                );
              })}
            </div>
          )}
          {currentPage < Math.ceil(count / perPage) ? (
            <div className="flex items-center gap-2">
              <Button
                variant="ghost"
                className="w-10 h-10 hover:bg-transparent cursor-default"
              >
                <Ellipsis className="w-5 h-5 shrink-0" />
              </Button>
              <Link
                href={{
                  query: {
                    page: currentPage + 1,
                  },
                }}
              >
                <Button variant="ghost" className="w-10 h-10">
                  <ChevronRight className="w-5 h-5 shrink-0" />
                </Button>
              </Link>
            </div>
          ) : null}
        </CardContent>
      </Card>
    </div>
  );
};

 export default Pagination;

我正在构建的应用程序有过滤器和搜索，但每当我进入不同的页面时，如果我有搜索或活动过滤器，这些参数将从 URL 中删除，我所拥有的只是“？page=#ofPage” ”。我想找到一种方法在使用分页更改页面时保留 URL 参数，以获得更好的用户体验。或者，如果这是不可能的，我可以使用查询字符串来完成吗？如果是这样怎么办？我感谢您提供的任何帮助。

更新：我通过添加常量

pathname, searchParams, and params

添加了几行，所以现在我可以将

${pathname}?${params.toString()}

添加到我的

Link

pathname

，但现在的问题是我获取了当前页面和我想要的页面转到我的 URL 中，因此，如果我可以使用

.set

从 URL 中删除当前页面，我认为它可以工作。

Answer 1

一种方法可以保留当前的查询字符串，然后将它们再次附加到下一个链接的 props 上，如下所示：

const Pagination = async ({ currentPage, count, perPage }: Props) => {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const params = new URLSearchParams(searchParams);
  const router = useRouter(); // remember to import useRouter
  const initialQuery = router.query; // save the initial query strings
  const totalPages = Math.ceil(count / perPage);
  const pages = [];
  const offset = 1;
  for (let i = currentPage - offset; i <= currentPage + offset; i++) {
    if (i >= 1 && i <= totalPages) {
      pages.push(i);
    }
  }
  await new Promise((resolve) => {
    setTimeout(() => {
      resolve(undefined);
    });
  });
  if (totalPages === 1) return null;
  return (
    <div className="px-[2.5%]">
      <Card className=" w-fit rounded-xl mx-auto">
        <CardContent className="flex items-center justify-center gap-2 p-2 ">
          {currentPage > 1 ? (
            <Link
              href={{
                pathname: "/components",
                query: {
                  ...initialQuery, // pass the initial query to next route
                  page: currentPage - 1,
                },
              }}
            >
          // rest of your code