如何通过Next Router传递数据且不暴露在URL中？

你的当前实现通过query传递数据会导致URL冗长且数据暴露，下面提供几种更合适的方案：

方案1：使用router.push的state参数 #

Next Router的push方法支持传入state字段，数据会被存在浏览器的历史记录栈中，不会出现在URL里。

跳转页面代码修改： #

const router = useRouter();
const myObject = {
  proprety1: "example1",
  proprety2: "example2",
  proprety3: "example3",
};

// ...
<button
  onClick={() => {
    router.push("/next-page", { state: { data: myObject } });
    // 也可以用对象格式的path写法：
    // router.push({ pathname: "/next-page" }, { state: { data: myObject } });
  }}
>
  Navigate
</button>

目标页面获取数据： #

在目标页面的客户端组件中，通过useRouter的router.state获取数据：

const router = useRouter();

// 组件渲染时监听state变化并处理数据
useEffect(() => {
  if (router.state?.data) {
    const receivedData = router.state.data;
    // 这里写数据处理逻辑
    console.log(receivedData);
  }
}, [router.state]);

注意：state中的数据仅存在于浏览器内存中，刷新页面后会丢失。如果需要持久化数据，可以结合localStorage临时存储，跳转后读取完成再清除。

方案2：使用全局状态管理 #

如果数据需要在多个页面或组件间共享，或者需要避免刷新丢失，可以用状态管理工具（如Zustand、Redux）或React Context：

示例（Zustand）： #

1. 创建状态存储文件：

// store.js
import { create } from 'zustand';

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

2. 跳转前存储数据：

import { useTempDataStore } from './store';

const router = useRouter();
const setTempData = useTempDataStore((state) => state.setTempData);

<button
  onClick={() => {
    setTempData(myObject);
    router.push("/next-page");
  }}
>
  Navigate
</button>

3. 目标页面读取数据：

import { useTempDataStore } from './store';

const tempData = useTempDataStore((state) => state.tempData);

useEffect(() => {
  if (tempData) {
    // 处理数据逻辑
    console.log(tempData);
    // 可选：读取完成后清空临时数据，避免后续干扰
    // useTempDataStore.getState().setTempData(null);
  }
}, [tempData]);

这种方式数据不会暴露在URL，若配置了持久化（如Zustand的persist插件），刷新页面后数据仍能保留，适合复杂业务场景。

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