如何使用next/navigation的router.push实现路由传参及URL掩码

1. 编程式路由跳转时传递数据 #

next/navigation 的 useRouter() 不再支持旧版 next/router 里直接在 push 中携带 state 的方式，你可以通过以下几种方案实现数据传递：

方案一：URL 查询参数（适合非敏感、可公开的数据） #

将数据编码后拼入 URL 查询参数，目标页面通过 useSearchParams 解析：

// 跳转页面组件
import { useRouter } from 'next/navigation';

function SourcePage() {
  const router = useRouter();
  const handleNavigate = () => {
    const data = { id: 123, name: 'test' };
    // 编码数据避免URL格式问题
    const encodedData = encodeURIComponent(JSON.stringify(data));
    router.push(`/target-page?data=${encodedData}`);
  };

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

// 目标页面组件
import { useSearchParams } from 'next/navigation';

function TargetPage() {
  const searchParams = useSearchParams();
  const dataStr = searchParams.get('data');
  const data = dataStr ? JSON.parse(decodeURIComponent(dataStr)) : null;

  return <div>接收的数据：{JSON.stringify(data)}</div>;
}

方案二：全局状态管理（适合敏感或复杂数据） #

用 React Context、Zustand、Redux 等状态管理工具，跳转前将数据存入全局状态，目标页面直接读取：

// 示例：用Zustand创建全局状态
import { create } from 'zustand';

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

// 跳转页面
function SourcePage() {
  const router = useRouter();
  const setTempData = useDataStore((state) => state.setTempData);

  const handleNavigate = () => {
    const data = { secret: 'xxx', details: {} };
    setTempData(data);
    router.push('/target-page');
  };

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

// 目标页面
function TargetPage() {
  const tempData = useDataStore((state) => state.tempData);
  // 读取后建议清空临时数据
  const setTempData = useDataStore((state) => state.setTempData);
  
  useEffect(() => {
    return () => setTempData(null);
  }, [setTempData]);

  return <div>全局状态数据：{JSON.stringify(tempData)}</div>;
}

方案三：临时存储（sessionStorage/localStorage，适合非敏感数据） #

跳转前将数据存入浏览器存储，目标页面读取后清除：

// 跳转页面
function SourcePage() {
  const router = useRouter();
  const handleNavigate = () => {
    const data = { id: 456, type: 'demo' };
    sessionStorage.setItem('tempRouteData', JSON.stringify(data));
    router.push('/target-page');
  };

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

// 目标页面
function TargetPage() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const storedData = sessionStorage.getItem('tempRouteData');
    if (storedData) {
      setData(JSON.parse(storedData));
      sessionStorage.removeItem('tempRouteData'); // 读取后删除
    }
  }, []);

  return <div>存储数据：{JSON.stringify(data)}</div>;
}

2. 实现 URL 掩码（替代旧版 next/router 的双参数 push） #

旧版 next/router 支持 router.push(目标路由, 显示的URL掩码)，但 next/navigation 移除了该参数，你可以通过以下方式实现：

方案一：Next.js 重写规则（推荐） #

在 next.config.js 中配置重写，让用户看到的 URL 与实际路由分离：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      // 将/masked/:id重写到/target/:id，用户看到的是/masked/123，实际访问/target/123
      {
        source: '/masked/:id',
        destination: '/target/:id',
      },
      // 如果是静态掩码，比如固定路径
      {
        source: '/masked-url',
        destination: '/actual-target-page',
      },
    ];
  },
};

module.exports = nextConfig;

配置完成后，直接跳转掩码 URL 即可：

import { useRouter } from 'next/navigation';

function SourcePage() {
  const router = useRouter();
  const handleNavigate = () => {
    router.push('/masked/123'); // 用户看到的URL是/masked/123，实际渲染/target/123的内容
  };

  return <button onClick={handleNavigate}>跳转到掩码URL</button>;
}

方案二：动态路由自定义显示（适合动态场景） #

如果需要动态生成掩码 URL，可以使用动态路由配合前端映射。比如创建 app/[maskSlug]/page.js，在页面内部根据 maskSlug 映射到实际的业务逻辑：

// app/[maskSlug]/page.js
import { useParams } from 'next/navigation';

export default function MaskedPage() {
  const { maskSlug } = useParams();
  // 根据maskSlug映射到实际数据或路由逻辑
  const actualData = getActualDataByMask(maskSlug); // 自定义映射函数

  return <div>实际内容：{JSON.stringify(actualData)}</div>;
}

跳转时直接使用掩码作为动态参数：

router.push('/my-custom-mask');

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