Next.js中如何通过新标签页传递Props到TSX组件？

核心逻辑说明 #

Next.js和Flutter的路由机制本质不同：Flutter可以直接给目标组件传props，但Next.js的新标签页跳转是发起新HTTP请求，没法直接传递组件props，得用以下几种方式实现类似效果：

1. URL查询参数（最常用的方案） #

这是新标签页传参的标准方式，参数会显示在URL中，对应Flutter里的路由传参逻辑：

// 跳转方组件
import Link from 'next/link';

export default function Home() {
  const exampleTitle = "Hello Next.js";
  const exampleDesc = "This is a new page";

  return (
    <Link 
      href={{
        pathname: '/new-page',
        query: { title: exampleTitle, desc: exampleDesc }
      }}
      target="_blank" // 指定打开新标签页
    >
      <a>打开新页面</a>
    </Link>
  );
}

// 接收方页面（app/new-page/page.tsx）
export default function NewPage({ searchParams }: { searchParams: { title?: string; desc?: string } }) {
  return (
    <div>
      <h1>{searchParams.title}</h1>
      <p>{searchParams.desc}</p>
    </div>
  );
}

2. 本地存储传参（适合敏感/复杂数据） #

如果不想把参数暴露在URL里，可以用localStorage临时存储数据：

// 跳转方组件
export default function Home() {
  const handleOpenNewPage = () => {
    // 把数据存入localStorage
    localStorage.setItem('pageData', JSON.stringify({
      title: "Hello Next.js",
      desc: "This is a new page"
    }));
    // 打开新标签页
    window.open('/new-page', '_blank');
  };

  return <button onClick={handleOpenNewPage}>打开新页面</button>;
}

// 接收方页面
'use client'; // 客户端组件标识，因为要用useState和useEffect
import { useState, useEffect } from 'react';

export default function NewPage() {
  const [pageData, setPageData] = useState<{ title?: string; desc?: string }>({});

  useEffect(() => {
    const data = localStorage.getItem('pageData');
    if (data) {
      setPageData(JSON.parse(data));
      // 用完及时清除，避免数据残留
      localStorage.removeItem('pageData');
    }
  }, []);

  return (
    <div>
      <h1>{pageData.title}</h1>
      <p>{pageData.desc}</p>
    </div>
  );
}

关于next/navigation和Link组件的混用 #

完全可以混用，注意场景区别就行：

• next/navigation的useRouter主要用于同标签页的客户端路由跳转，没法直接打开新标签页，要开新标签得结合window.open；
• Link是官方推荐的路由跳转组件，不管同标签还是新标签（加target="_blank"）都能直接用，兼容性更好。

混用示例：

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

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

  // 同标签页跳转用useRouter
  const handleSameTabJump = () => {
    router.push('/new-page?title=SameTabDemo');
  };

  return (
    <div>
      <button onClick={handleSameTabJump}>同标签页跳转</button>
      <Link href="/new-page?title=NewTabDemo" target="_blank">
        <a>新标签页跳转</a>
      </Link>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Hamza Al Sorkhy