Next.js 14.0.4中如何替代react-router-dom的useLocation()实现页面状态传递？

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

在跳转的源页面，通过Link组件的state属性传递状态数据，该数据不会出现在URL中：

import Link from 'next/link';

export default function SourcePage() {
  const transferData = {
    userId: 123,
    userName: 'John Doe',
    isVerified: true
  };

  return (
    <Link href="/target-page" state={transferData}>
      跳转到目标页面
    </Link>
  );
}

方法2：使用useRouter编程式跳转传状态 #

如果需要通过事件触发跳转（比如按钮点击），可以用useRouter的push方法，第二个参数即为传递的状态：

'use client'; // 必须添加，App Router中useRouter仅支持客户端组件

import { useRouter } from 'next/navigation';

export default function SourcePage() {
  const router = useRouter();
  const transferData = { orderId: 'ORD-9876', total: 299.99 };

  const handleJump = () => {
    router.push('/target-page', { state: transferData });
  };

  return (
    <button onClick={handleJump}>点击跳转并传状态</button>
  );
}

在目标页面获取状态 #

目标页面同样需要标记为客户端组件，通过useRouter获取传递的状态：

'use client';

import { useRouter } from 'next/navigation';

export default function TargetPage() {
  const router = useRouter();
  const receivedState = router.state;

  return (
    <div>
      <h1>目标页面</h1>
      <p>用户ID：{receivedState?.userId}</p>
      <p>订单号：{receivedState?.orderId}</p>
    </div>
  );
}

注意事项 #

• 状态仅存储在客户端内存中，刷新页面后会丢失，若需持久化数据，可结合localStorage/sessionStorage或后端存储实现。
• 所有使用useRouter的组件必须添加'use client';指令，这是App Router的客户端组件限制。
• 该方式传递的状态不会暴露在URL中，完全匹配你之前使用React Router的需求。

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