如何在Next.js中用Link组件传数据且不暴露于URL？

针对你在Next.js中页面导航时不想将数据暴露在URL中的需求，以下是几种可行的实现方案：

方案一：使用router.push的state参数（Pages Router） #

这是最直接的临时数据传递方式，数据存储在客户端内存中，不会出现在URL里，但页面刷新后数据会丢失。

源组件代码 #

import { useRouter } from 'next/router';

const SourceComponent = () => {
  const router = useRouter();
  const dataToPass = { key: 'value' };

  const handleClick = () => {
    // 第三个参数传入state，携带要传递的数据
    router.push('/target-page', undefined, { state: dataToPass });
  };

  return <button onClick={handleClick}>跳转到目标页面</button>;
};

export default SourceComponent;

目标页面代码（/pages/target-page.js） #

import { useRouter } from 'next/router';

const TargetPage = () => {
  const router = useRouter();
  // 从router的state中获取传递的数据
  const passedData = router.state;

  return <div>传递的数据：{JSON.stringify(passedData)}</div>;
};

export default TargetPage;

方案二：使用客户端存储（localStorage/sessionStorage） #

如果需要数据在页面刷新后仍保留，可以使用浏览器的本地存储，注意敏感数据不建议用这种方式（明文存储）。

源组件代码 #

import { useRouter } from 'next/router';

const SourceComponent = () => {
  const router = useRouter();
  const dataToPass = { key: 'value' };

  const handleClick = () => {
    // 用sessionStorage存储，页面关闭后自动清除；也可改用localStorage持久化存储
    sessionStorage.setItem('tempPassedData', JSON.stringify(dataToPass));
    router.push('/target-page');
  };

  return <button onClick={handleClick}>跳转到目标页面</button>;
};

export default SourceComponent;

目标页面代码 #

import { useEffect, useState } from 'react';

const TargetPage = () => {
  const [passedData, setPassedData] = useState(null);

  useEffect(() => {
    // 读取存储的数据
    const storedData = sessionStorage.getItem('tempPassedData');
    if (storedData) {
      setPassedData(JSON.parse(storedData));
      // 读取后删除数据，避免其他页面误访问
      sessionStorage.removeItem('tempPassedData');
    }
  }, []);

  return <div>传递的数据：{passedData ? JSON.stringify(passedData) : '无数据'}</div>;
};

export default TargetPage;

方案三：全局状态管理（以Zustand为例） #

适合复杂应用中跨组件/页面的状态共享，数据存储在内存中，刷新后丢失（可结合持久化插件实现持久化）。

1. 安装Zustand #

npm install zustand

2. 创建状态存储文件（/stores/tempDataStore.js） #

import { create } from 'zustand';

const useTempDataStore = create((set) => ({
  tempData: null,
  setTempData: (data) => set({ tempData: data }),
  clearTempData: () => set({ tempData: null }),
}));

export default useTempDataStore;

3. 源组件代码 #

import { useRouter } from 'next/router';
import useTempDataStore from '../stores/tempDataStore';

const SourceComponent = () => {
  const router = useRouter();
  const setTempData = useTempDataStore((state) => state.setTempData);
  const dataToPass = { key: 'value' };

  const handleClick = () => {
    setTempData(dataToPass);
    router.push('/target-page');
  };

  return <button onClick={handleClick}>跳转到目标页面</button>;
};

export default SourceComponent;

4. 目标页面代码 #

import { useEffect } from 'react';
import useTempDataStore from '../stores/tempDataStore';

const TargetPage = () => {
  const tempData = useTempDataStore((state) => state.tempData);
  const clearTempData = useTempDataStore((state) => state.clearTempData);

  // 组件卸载时清除临时数据
  useEffect(() => {
    return () => clearTempData();
  }, [clearTempData]);

  return <div>传递的数据：{tempData ? JSON.stringify(tempData) : '无数据'}</div>;
};

export default TargetPage;

针对Next.js 13+ App Router的方案 #

如果你使用的是App Router，同样可以通过state参数传递数据：

源组件（需标记为Client Component） #

'use client';

import { useRouter } from 'next/navigation';

const SourceComponent = () => {
  const router = useRouter();
  const dataToPass = { key: 'value' };

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

  return <button onClick={handleClick}>跳转到目标页面</button>;
};

export default SourceComponent;

目标页面（需标记为Client Component） #

'use client';

import { useRouter } from 'next/navigation';

const TargetPage = () => {
  const router = useRouter();
  // 从router的state中获取数据
  const passedData = router.state;

  return <div>传递的数据：{passedData ? JSON.stringify(passedData) : '无数据'}</div>;
};

export default TargetPage;

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