URL查询传参至子页面引发431请求头过大问题及优化问询

你当前的问题核心是把完整的campaign对象塞进URL的query参数中，导致URL长度超标触发HTTP 431请求头过大错误。最可靠的解决思路是仅传递campaign的唯一标识，动态页面根据标识重新获取完整数据，具体方案如下：

1. 修改Index页面的Link跳转逻辑 #

只在URL中传递campaign的唯一标识（比如你的campaign.pId），彻底移除query里的完整对象，大幅缩短URL：

{!isLoading &&
  campaigns.length > 0 &&
  campaigns.map((campaign: any) => (
    <Link
      key={campaign.pId}
      href={`/campaigns/${campaign.pId}`} // 用唯一ID作为动态路由参数
    >
      <FundCard {...campaign} />
    </Link>
  ))}

如果想保留campaign.title作为友好URL路径，也可以仅把唯一ID放到query中：

href={{
  pathname: `/campaigns/${campaign.title}`,
  query: { id: campaign.pId }, // 只传唯一ID，而非整个对象
}}

2. 在动态页面[campaignId].tsx中获取完整数据 #

根据URL中的唯一标识，重新请求或查询完整的campaign数据，分两种常见场景实现：

场景一：服务端渲染（SSR）/静态生成（SSG） #

如果使用Next.js Pages Router，在动态页面中通过getServerSideProps或getStaticProps获取数据：

// [campaignId].tsx
import { GetServerSideProps } from 'next';

interface Campaign {
  pId: string;
  title: string;
  // 其他campaign字段
}

const CampaignDetail = ({ campaign }: { campaign: Campaign }) => {
  // 渲染活动详情
  return (
    <div>
      <h1>{campaign.title}</h1>
      {/* 其他详情内容 */}
    </div>
  );
};

export const getServerSideProps: GetServerSideProps = async (context) => {
  const campaignId = context.params?.campaignId as string;
  // 调用API或查询数据库，根据ID获取完整数据
  const res = await fetch(`你的API地址/campaigns/${campaignId}`);
  const campaign = await res.json();

  return {
    props: { campaign },
  };
};

export default CampaignDetail;

场景二：客户端组件（App Router或客户端渲染） #

如果是Next.js App Router的客户端组件，或采用客户端渲染逻辑，通过useParams获取ID后请求数据：

// app/campaigns/[campaignId]/page.tsx
'use client';

import { useEffect, useState } from 'react';
import { useParams } from 'next/navigation';

interface Campaign {
  pId: string;
  title: string;
  // 其他campaign字段
}

export default function CampaignDetail() {
  const params = useParams();
  const campaignId = params.campaignId as string;
  const [campaign, setCampaign] = useState<Campaign | null>(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchCampaign = async () => {
      setIsLoading(true);
      try {
        const res = await fetch(`你的API地址/campaigns/${campaignId}`);
        const data = await res.json();
        setCampaign(data);
      } catch (err) {
        console.error('获取活动数据失败:', err);
      } finally {
        setIsLoading(false);
      }
    };

    fetchCampaign();
  }, [campaignId]);

  if (isLoading) return <div>加载中...</div>;
  if (!campaign) return <div>找不到该活动</div>;

  return (
    <div>
      <h1>{campaign.title}</h1>
      {/* 其他详情内容 */}
    </div>
  );
}

3. 可选：客户端导航临时传数据（仅作优化） #

如果只是客户端跳转时想临时传递数据、避免重复请求，可以用Next.js Router的state参数，但刷新页面后state会丢失，因此只能作为辅助优化，不能替代“根据ID重新获取数据”的核心逻辑：

// Index页面的Link
<Link
  href={`/campaigns/${campaign.pId}`}
  state={{ campaign }} // 临时传递完整对象
>
  <FundCard {...campaign} />
</Link>

在动态页面中获取state：

// Pages Router
'use client';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

const CampaignDetail = () => {
  const router = useRouter();
  const [campaign, setCampaign] = useState<any>(router.state?.campaign || null);

  // 刷新后state丢失，需降级重新请求
  useEffect(() => {
    if (!campaign) {
      const campaignId = router.query.campaignId as string;
      // 调用API获取数据
    }
  }, [campaign, router.query.campaignId]);

  // 渲染逻辑
};

总结 #

最稳定的方案是仅传递唯一ID，动态页面根据ID重新获取数据，既解决了URL过长的问题，也保证了刷新页面后数据依然能正常加载。state传递仅适合客户端跳转的临时优化，不能作为唯一数据来源。

内容的提问来源于stack exchange，提问作者0xhaz