Next.js页面间传参失败，报React子元素无效错误求助

问题根源 #

1. 传参格式错误：Link组件的href.query必须是键值对结构的对象，你直接传入字符串data会导致router.query解析成无效格式，最终接收端拿到的是不符合预期的对象。
2. 直接渲染对象：router.query本身是一个对象，React无法直接将对象作为子元素渲染，必须提取其中的具体属性值。

修正后的代码 #

PostScreen页面（传参端）

export default function PostScreen() {
  const data = 'Hello';
  return (
    <>
      <div>
        <span>Create Post</span>
        <Link
          href={{
            pathname: '/details',
            query: { username: data }, // 改为明确的键值对参数
          }}
        >
          <a>Click me</a>
        </Link>
      </div>
    </>
  );
}

Details页面（接收端）

import { useRouter } from 'next/router';

function Details() {
  const router = useRouter();
  // 提取query中的具体参数，加默认值避免初始加载时的undefined
  const username = router.query.username || '加载中...';
  
  return (
    <div>
      <div>
        <div>
          <strong>Username:</strong> {username}
        </div>
      </div>
    </div>
  );
}

export default Details;

额外注意事项 #

• 页面初始加载时router.query可能为空对象，所以务必给参数加默认值或用可选链（router.query?.username）处理，避免渲染报错。
• 如果需要传递复杂对象，可先将对象转为JSON字符串（JSON.stringify(obj)）作为query参数，接收时再解析（JSON.parse(router.query.data)），但URL有长度限制，不适合传递大数据；大数据场景建议用Context、Redux或本地存储。

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