Next.js 13动态路由下如何传递选中数据至详情页？

你的问题核心在于两点：Next.js 13（尤其是App Router）不再兼容next/router，且直接将对象传入query会被转成无效字符串。以下是几种可行的解决方法：

方案一：通过ID在详情页重新获取数据（推荐） #

这是Next.js推荐的做法，既符合服务端渲染的性能与SEO要求，也避免了URL传参的限制与安全问题。

首页修改Link： #

只传递house.id到动态路由，无需额外传对象：

{house.images.map((img, index) => {
  return (
    <Link
      href={`/living/${house.id}`}
      key={index}
    >
      <div className="w-full relative -z-10 pt-[100%] cursor-pointer">
        <Image
          src={img}
          alt="profile"
          fill
          className="w-full h-full top-0 left-0 -z-10 object-cover rounded-2xl ease-in-out duration-200"
        />
      </div>
    </Link>
  );
})}

详情页实现（以App Router为例，app/living/[homeid]/page.js）： #

在服务端组件中直接通过params获取ID，复用首页的数据获取逻辑拿到完整的house信息：

// 服务端组件，无需标记'use client'
async function DetailPage({ params }) {
  const { homeid } = params;
  // 替换为你实际的根据ID获取数据的函数
  const house = await fetchHouseById(homeid);

  if (!house) {
    return <div>未找到对应房源</div>;
  }

  return (
    <div>
      {/* 渲染house详情内容 */}
      <h1>{house.title}</h1>
      {/* ...其他详情字段 */}
    </div>
  );
}

export default DetailPage;

方案二：序列化对象到URL参数（适合小型非敏感数据） #

如果不想重新请求数据，可以将house对象序列化为JSON字符串传递，再在详情页反序列化。注意：URL长度有限制，且数据会暴露在地址栏，不适合大数据或敏感信息。

首页修改Link： #

将house序列化为JSON字符串传入query：

{house.images.map((img, index) => {
  return (
    <Link
      href={{
        pathname: `/living/${house.id}`,
        query: { house: JSON.stringify(house) },
      }}
      key={index}
    >
      <div className="w-full relative -z-10 pt-[100%] cursor-pointer">
        <Image
          src={img}
          alt="profile"
          fill
          className="w-full h-full top-0 left-0 -z-10 object-cover rounded-2xl ease-in-out duration-200"
        />
      </div>
    </Link>
  );
})}

详情页实现： #

使用next/navigation的useSearchParams获取参数并反序列化，需标记为客户端组件：

'use client';

import { useSearchParams } from 'next/navigation';

function DetailPage({ params }) {
  const searchParams = useSearchParams();
  const houseStr = searchParams.get('house');
  const house = houseStr ? JSON.parse(houseStr) : null;

  if (!house) {
    return <div>数据加载失败</div>;
  }

  return (
    <div>
      {/* 渲染house详情 */}
    </div>
  );
}

export default DetailPage;

方案三：React Context/状态管理（适合纯客户端场景） #

如果是纯客户端跳转且不想暴露数据，可以用React Context或 Zustand/Jotai 等状态管理工具存储选中的house，跳转后从状态中读取。但页面刷新后数据会丢失，因此仅适合临时数据传递。

内容的提问来源于stack exchange，提问作者Mohammed Bekele