Next.js App Router中无需useParams/useSearchParams传递对象参数

你可以通过路由跳转的state参数来传递完整对象，无需将参数拼到URL里，下面是两种具体实现方式：

方法1：使用Link组件传递 #

在/home页面的组件中，给Link组件添加state属性，直接传入你的person对象：

import Link from 'next/link';

type Person = {
  name: string;
  age: number;
  address: string;
};

const person: Person = {
  name: "John Doe",
  age: 25,
  address: "123 Main St",
};

export default function Home() {
  return (
    <Link 
      href="/person" 
      state={{ person }} // 直接传入对象
    >
      跳转至用户详情页
    </Link>
  );
}

在/person页面的客户端组件中，通过useRouter获取state里的对象：

'use client';
import { useRouter } from 'next/navigation';

type Person = {
  name: string;
  age: number;
  address: string;
};

export default function Person() {
  const router = useRouter();
  const { person } = router.state || {};

  // 处理直接访问/person页面的情况（此时state为空）
  if (!person) {
    return <div>未获取到用户信息</div>;
  }

  return (
    <div>
      <h2>用户信息</h2>
      <p>姓名：{person.name}</p>
      <p>年龄：{person.age}</p>
      <p>地址：{person.address}</p>
    </div>
  );
}

方法2：使用router.push方法传递 #

如果需要通过按钮点击等交互触发跳转，可在客户端组件中用router.push的第二个参数传入state：

'use client';
import { useRouter } from 'next/navigation';

type Person = {
  name: string;
  age: number;
  address: string;
};

const person: Person = {
  name: "John Doe",
  age: 25,
  address: "123 Main St",
};

export default function Home() {
  const router = useRouter();

  const handleNavigate = () => {
    router.push('/person', { state: { person } });
  };

  return (
    <button onClick={handleNavigate}>跳转至用户详情页</button>
  );
}

注意事项 #

• state中的数据存储在浏览器的history栈中，直接刷新/person页面会丢失state数据，如果需要持久化，得结合localStorage或后端存储实现。
• 传递的对象必须是可序列化的（不能包含函数、Symbol等无法被JSON序列化的内容），否则会导致跳转失败或数据丢失。

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