Next.js 13中使用<Link>的as属性时useSearchParams返回null问题

Next.js 13 App Router确实移除了Pages Router中Link组件的as属性功能，该属性用于伪装URL同时保留查询参数的逻辑仅适用于旧路由系统，App Router文档中并未保留这一特性，因此使用useSearchParams()无法获取到隐藏的pid参数。

针对你需要跟踪页面特定数据的需求，提供以下几种可行方案：

方案一：通过React Context全局管理页面ID #

创建全局Context来维护页面ID，路由切换时自动递增，所有组件可直接获取当前ID：

1. 创建页面ID Context文件

// app/page-id-context.tsx
'use client';

import { createContext, useContext, useState, useEffect } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';

const PageIdContext = createContext<{ pid: number }>({ pid: 0 });

export function PageIdProvider({ children }: { children: React.ReactNode }) {
  const [pid, setPid] = useState(0);
  const pathname = usePathname();
  const searchParams = useSearchParams();

  // 路由路径或查询参数变化时，递增页面ID
  useEffect(() => {
    setPid(prev => prev + 1);
  }, [pathname, searchParams]);

  return (
    <PageIdContext.Provider value={{ pid }}>
      {children}
    </PageIdContext.Provider>
  );
}

export function usePageId() {
  return useContext(PageIdContext);
}

2. 在根布局中引入Provider

// app/layout.tsx
import { PageIdProvider } from './page-id-context';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-CN">
      <body>
        <PageIdProvider>{children}</PageIdProvider>
      </body>
    </html>
  );
}

3. 在页面组件中使用

'use client';

import { usePageId } from './page-id-context';

export default function Home() {
  const { pid } = usePageId();
  console.log('当前页面ID:', pid);
  return <div>首页（页面ID：{pid}）</div>;
}

方案二：通过路由跳转时传递state #

利用App Router中router.push方法支持的state参数，将页面ID存入路由状态中，不在URL中显示：

1. 自定义Link组件

'use client';

import { useRouter } from 'next/navigation';
import { ReactNode } from 'react';

let pid = 0;

export default function CustomLink({ children, href }: { children: ReactNode; href: string }) {
  const router = useRouter();

  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
    e.preventDefault();
    pid += 1;
    // 传递页面ID到路由状态
    router.push(href, { state: { pid } });
  };

  return <a href={href} onClick={handleClick}>{children}</a>;
}

2. 在页面中获取路由state

'use client';

import { useRouter } from 'next/navigation';

export default function Home() {
  const router = useRouter();
  console.log('页面ID:', router.state?.pid);
  return <div>首页</div>;
}

注意：路由state仅存在于浏览器会话中，页面刷新后会丢失，若需要持久化可结合localStorage存储。

关于window.history.state的补充 #

App Router确实会覆盖浏览器的history.state，如果需要保留自定义状态，可以在自定义跳转逻辑中合并原有状态：

const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
  e.preventDefault();
  pid += 1;
  const existingState = window.history.state || {};
  router.push(href, { state: { ...existingState, pid } });
};

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