下一页充满悬念，无法正常工作

Question

我在使用此代码进行生产时遇到了一些问题。它在本地运行得很好，但是当我尝试将其上传到 Netlify 时，我收到此错误 ⨯ useSearchParams() 应该包含在页面“/imoveis”的悬念边界中。 下面是有问题的页面，有什么想法吗？

"use client";

import React, { Suspense } from "react";
import { imoveis } from "../data/imoveis";
import Link from "next/link";
import { useSearchParams } from "next/navigation";

const ImoveisPage = () => {
  const searchParams = useSearchParams();
  const tipo = searchParams.get("tipo");

  const filteredImoveis = tipo
    ? imoveis.filter((imovel) => imovel.tipo === tipo)
    : [];

  return (
    <div className="bg-gray-400 text-black min-h-screen p-8">
      <h1 className="text-2xl">Resultados da Pesquisa</h1>
      <Suspense fallback={<div>Carregando...</div>}>
        {filteredImoveis.length > 0 ? (
          <ul>
            {filteredImoveis.map((imovel, index) => (
              <li
                key={index}
                className="bg-neutral-200 m-2 text-black p-2 w-96"
              >
                <div>
                  <Link href={imovel.path}>
                    <p>{imovel.title}</p>
                    <p>{imovel.price}</p>
                  </Link>
                </div>
              </li>
            ))}
          </ul>
        ) : (
          <p>Nenhum resultado encontrado.</p>
        )}
      </Suspense>
    </div>
  );
};

export default ImoveisPage;

Answer 1

useSearchParams 只能在 Suspense 上下文之后调用，您需要一个处理 Suspense 部分的包装组件。

const ImoveisPageWrapper = () => {
  return (
    <div className="bg-gray-400 text-black min-h-screen p-8">
      <h1 className="text-2xl">Resultados da Pesquisa</h1>
      <Suspense fallback={<div>Carregando...</div>}>
        <ImoveisPage />
      </Suspense>
    </div>
  );
};

const ImoveisPage = () => {
  const searchParams = useSearchParams();
  const tipo = searchParams.get("tipo");

  const filteredImoveis = tipo
    ? imoveis.filter((imovel) => imovel.tipo === tipo)
    : [];

  return (
    <>
      {filteredImoveis.length > 0 ? (
        <ul>
          {filteredImoveis.map((imovel, index) => (
            <li key={index} className="bg-neutral-200 m-2 text-black p-2 w-96">
              <div>
                <Link href={imovel.path}>
                  <p>{imovel.title}</p>
                  <p>{imovel.price}</p>
                </Link>
              </div>
            </li>
          ))}
        </ul>
      ) : (
        <p>Nenhum resultado encontrado.</p>
      )}
    </>
  );
};

Answer 2

每个人的解决方案都不同。

1.我将所有使用

useSearchParams

和

Suspense

的组件包装在其父组件中

• 使用

  useSearchParams

的示例组件

import { useEffect } from "react";
import { useSearchParams } from "next/navigation";

export default function AuthHandler() {
  const searchParams = useSearchParams();

  useEffect(() => {
    const token = searchParams.get("token");
    if (token) {
      localStorage.setItem("jwt", token);
      window.location.href = "/";
    }
  }, [searchParams]);

  return null;
};

export default AuthHandler;

• 在父组件中，用

  Suspense

包裹起来

<Suspense fallback={<div>Loading...</div>}>
     <AuthHandler />
</Suspense>

2.创建了

src/app/loading.tsx

，（刚刚创建，没有在任何地方使用）

"use client";

import React from "react";
import { Loader2 } from "lucide-react";

export default function Loading() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <Loader2 className="animate-spin w-10 h-10 text-primary" />
    </div>
  );
}