Next.js中如何在动态路由页面间传递大数据对象（不使用查询参数）

针对你不想通过URL查询参数传递大pokemon对象的需求，以下是几种可行的实现方式：

1. 目标页通过ID重新获取完整数据（推荐） #

这是Next.js中最常规且可靠的方案，利用动态路由的ID在目标页面发起请求获取完整数据，完全无需在客户端传递大对象：

Pages Router 示例 #

// pages/pokemon/[id].js
export async function getServerSideProps(context) {
  // 从路由参数中获取ID
  const { id } = context.params;
  // 调用接口获取完整的pokemon数据
  const res = await fetch(`https://你的API地址/pokemon/${id}`);
  const pokemon = await res.json();

  return { props: { pokemon } };
}

function PokemonPage({ pokemon }) {
  // 直接使用props中的完整数据
  return (
    <div>
      <h1>{pokemon.name}</h1>
      {/* 渲染其他数据 */}
    </div>
  );
}

export default PokemonPage;

App Router 示例 #

// app/pokemon/[id]/page.js
async function PokemonPage({ params }) {
  // 从路由参数中获取ID
  const res = await fetch(`https://你的API地址/pokemon/${params.id}`, {
    // 根据需求设置缓存策略，比如禁用缓存保证数据最新
    cache: 'no-store'
  });
  const pokemon = await res.json();

  return (
    <div>
      <h1>{pokemon.name}</h1>
      {/* 渲染其他数据 */}
    </div>
  );
}

export default PokemonPage;

这种方式不依赖客户端状态，页面刷新后依然能正常获取数据，同时对SEO友好。

2. 使用全局状态管理存储完整数据 #

如果不想在目标页重复请求，可以在列表页获取完整的pokemon数据后存入全局状态，目标页直接通过ID从状态中取数据。这里以轻量状态库Zustand为例：

1. 创建状态仓库 #

// store/pokemonStore.js
import { create } from 'zustand';

export const usePokemonStore = create((set) => ({
  // 以ID为key存储所有pokemon对象
  pokemonMap: {},
  // 批量存入数据的方法
  setPokemonMap: (pokemons) => {
    const map = pokemons.reduce((acc, p) => ({ ...acc, [p.id]: p }), {});
    set({ pokemonMap: map });
  }
}));

2. 列表页存入数据 #

// 列表页面组件
import { usePokemonStore } from '../store/pokemonStore';

function PokemonList() {
  const { setPokemonMap } = usePokemonStore();

  useEffect(() => {
    async function fetchFullPokemons() {
      // 获取完整的pokemon列表数据
      const res = await fetch('https://你的API地址/pokemons');
      const fullPokemons = await res.json();
      // 存入全局状态
      setPokemonMap(fullPokemons);
    }
    fetchFullPokemons();
  }, []);

  return (
    <div>
      {pokemonsList?.map((pokemon, index) => (
        <Link href={`/pokemon/${pokemon.id}`} key={index}>
          <a>
            <Card pokemon={pokemon} />
          </a>
        </Link>
      ))}
    </div>
  );
}

3. 目标页从状态取数据 #

// app/pokemon/[id]/page.js
import { usePokemonStore } from '../../store/pokemonStore';
import { useParams } from 'next/navigation';

function PokemonPage() {
  const params = useParams();
  const { pokemonMap } = usePokemonStore();
  const pokemon = pokemonMap[params.id];

  // 兜底处理：如果状态丢失（比如刷新页面），重新请求数据
  if (!pokemon) {
    // 这里可以添加加载状态和重新请求逻辑
    return <div>加载中...</div>;
  }

  return (
    <div>
      <h1>{pokemon.name}</h1>
      {/* 渲染完整数据 */}
    </div>
  );
}

注意：这种方式依赖客户端状态，页面刷新后状态会清空，必须添加兜底的重新请求逻辑，避免用户看到空白页面。

3. 静态生成预渲染页面（适用于静态数据） #

如果pokemon数据是不会频繁更新的静态内容，可以在构建阶段预生成所有动态路由页面，每个页面预先获取并渲染完整数据：

// app/pokemon/[id]/page.js
// 预生成所有动态路由参数
export async function generateStaticParams() {
  const res = await fetch('https://你的API地址/pokemons');
  const pokemons = await res.json();
  // 返回所有ID作为路由参数
  return pokemons.map(pokemon => ({ id: pokemon.id.toString() }));
}

async function PokemonPage({ params }) {
  const res = await fetch(`https://你的API地址/pokemon/${params.id}`);
  const pokemon = await res.json();

  return (
    <div>
      <h1>{pokemon.name}</h1>
      {/* 渲染完整数据 */}
    </div>
  );
}

export default PokemonPage;

这种方式页面加载速度极快，SEO最优，但数据更新时需要重新构建项目，适合数据变动频率低的场景。

4. 使用Link的state属性（不推荐用于大数据） #

Next.js的Link组件支持通过state属性传递数据，该数据会存在浏览器的history状态中，不会出现在URL里。但由于数据存储在客户端，刷新页面后会丢失，且大数据可能带来性能或存储限制，仅作为补充方案：

列表页传递数据 #

<Link 
  href={`/pokemon/${pokemon.id}`} 
  key={index}
  state={{ pokemon: pokemon }}
>
  <a>
    <Card pokemon={pokemon} />
  </a>
</Link>

目标页获取数据 #

// app/pokemon/[id]/page.js
import { useRouter } from 'next/navigation';

function PokemonPage() {
  const router = useRouter();
  const { pokemon } = router.state || {};

  if (!pokemon) {
    // 兜底：重新请求数据
    return <div>加载中...</div>;
  }

  return (
    <div>
      <h1>{pokemon.name}</h1>
      {/* 渲染数据 */}
    </div>
  );
}

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