Next.js 14中如何通过Link组件实现属性透传？

首先在DropDownModal中定义好需要传递的状态，比如用户信息：

import { useState } from 'react';

export function DropDownModal() {
  // 提升的状态示例
  const [user, setUser] = useState({ id: 123, name: 'Lee Williams' });

  return (
    <DropdownMenu>
      <DropdownMenuTrigger>
        <AvatarBlock user={user} /> {/* 传给AvatarBlock没问题 */}
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuLabel>My Account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        {/* 后续方案替换这里的Link */}
        <DropdownMenuItem>
        </DropdownMenuItem>
        <DropdownMenuItem>Log out</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

接下来根据你使用的Next.js路由方案（App Router 或 Pages Router）选择对应的传参方式：

一、App Router（app目录） #

方法1：URL查询参数传递 #

直接将数据拼接在URL的查询参数中，目标页面通过searchParams读取：

// DropDownModal中的Link写法
<Link href={`/Account?userId=${user.id}&userName=${encodeURIComponent(user.name)}`}>
  Profile Page
</Link>

在app/Account/page.js中获取数据：

export default function Account({ searchParams }) {
  const userId = searchParams.userId;
  // 解码特殊字符
  const userName = searchParams.userName ? decodeURIComponent(searchParams.userName) : '';

  return (
    <div>
      <h1>Profile Page</h1>
      <p>User ID: {userId}</p>
      <p>User Name: {userName}</p>
    </div>
  );
}

方法2：路由状态传递（不暴露在URL中） #

如果不想把数据放在URL里，用useRouter的push方法带状态跳转：

// DropDownModal中修改为点击事件触发跳转
import { useRouter } from 'next/navigation';

export function DropDownModal() {
  const [user, setUser] = useState({ id: 123, name: 'Lee Williams' });
  const router = useRouter();

  const navigateToAccount = () => {
    router.push('/Account', { state: { user } });
  };

  return (
    // ...其他部分不变
    <DropdownMenuItem onClick={navigateToAccount}>
      Profile Page
    </DropdownMenuItem>
  );
}

在app/Account/page.js中读取状态（需要标记为客户端组件）：

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

export default function Account() {
  const router = useRouter();
  // 从路由状态中获取数据
  const user = router.state?.user;

  if (!user) {
    return <div>Loading user data...</div>;
  }

  return (
    <div>
      <h1>Profile Page</h1>
      <p>User ID: {user.id}</p>
      <p>User Name: {user.name}</p>
    </div>
  );
}

二、Pages Router（pages目录） #

方法1：URL查询参数传递 #

和App Router逻辑类似，通过URL参数传递：

// DropDownModal中的Link写法
<Link href={`/Account?userId=${user.id}&userName=${encodeURIComponent(user.name)}`}>
  Profile Page
</Link>

在pages/Account.js中用useRouter读取：

import { useRouter } from 'next/router';

export default function Account() {
  const router = useRouter();
  const { userId, userName } = router.query;

  return (
    <div>
      <h1>Profile Page</h1>
      <p>User ID: {userId}</p>
      <p>User Name: {userName ? decodeURIComponent(userName) : ''}</p>
    </div>
  );
}

方法2：路由状态传递（不暴露在URL中） #

用useRouter的push方法携带状态：

// DropDownModal中修改跳转逻辑
import { useRouter } from 'next/router';

export function DropDownModal() {
  const [user, setUser] = useState({ id: 123, name: 'Lee Williams' });
  const router = useRouter();

  const goToAccount = () => {
    router.push('/Account', undefined, { state: { user } });
  };

  return (
    // ...其他部分不变
    <DropdownMenuItem onClick={goToAccount}>
      Profile Page
    </DropdownMenuItem>
  );
}

在pages/Account.js中读取状态：

import { useRouter } from 'next/router';

export default function Account() {
  const router = useRouter();
  const user = router.state?.user;

  if (!user) {
    return <div>Loading user data...</div>;
  }

  return (
    <div>
      <h1>Profile Page</h1>
      <p>User ID: {user.id}</p>
      <p>User Name: {user.name}</p>
    </div>
  );
}

为什么你之前传参显示null？ #

直接给Link组件加自定义props（比如<Link href="/Account" user={user}>）是无效的，因为Link只处理和路由相关的属性，不会透传自定义props到目标页面，必须用上述路由支持的传参方式。

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