如何在Next.js中获取React Router Dom里useLocation的state对象？

Next.js的路由系统分为Pages Router和App Router两种，对应获取跳转state的方式略有不同，以下是具体实现：

Pages Router（旧路由系统） #

使用next/router提供的useRouter钩子，路由跳转时传入的state会直接挂载在router对象上：

1. 跳转时传递state #

import { useRouter } from 'next/router';

function SourcePage() {
  const router = useRouter();

  const goToDestination = () => {
    // 第三个参数配置state
    router.push('/destination', undefined, {
      state: { userId: 123, userName: 'Alice' }
    });
  };

  return <button onClick={goToDestination}>跳转至目标页</button>;
}

2. 目标页获取state #

import { useRouter } from 'next/router';

function DestinationPage() {
  const router = useRouter();
  // 直接从router对象解构state
  const { state } = router;

  return (
    <div>
      <p>用户ID：{state?.userId}</p>
      <p>用户名：{state?.userName}</p>
    </div>
  );
}

App Router（新路由系统） #

使用next/navigation提供的useRouter钩子，仅支持在客户端组件中使用（需添加'use client'指令）：

1. 跳转时传递state #

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

function SourcePage() {
  const router = useRouter();

  const goToDestination = () => {
    // 第二个参数配置state
    router.push('/destination', {
      state: { userId: 123, userName: 'Alice' }
    });
  };

  return <button onClick={goToDestination}>跳转至目标页</button>;
}

2. 目标页获取state #

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

function DestinationPage() {
  const router = useRouter();
  // 从router对象获取state（注意：App Router中state为可选值）
  const pageState = router.state;

  return (
    <div>
      <p>用户ID：{pageState?.userId}</p>
      <p>用户名：{pageState?.userName}</p>
    </div>
  );
}

注意事项 #

• state是客户端临时数据，页面刷新后会丢失，若需要持久化数据，建议使用URL查询参数（useSearchParams）或本地存储。
• 服务端组件无法访问state，必须在客户端组件中使用上述钩子。
• TypeScript环境下，App Router的router.state类型为unknown，建议手动添加类型断言或定义接口：

  interface PageState {
    userId: number;
    userName: string;
  }
  const pageState = router.state as PageState;
  

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