NextJS中使用Router.push向页面组件传递Props的实现方法

嘿，这个问题我在项目里碰到好多次啦！在Next.js里用Router.push跳转时给目标组件传props，有两种实用方案，你可以根据数据的敏感程度和需求来选：

这种方法是把要传递的数据打包成URL的查询参数，优点是简单直观，而且刷新页面后数据不会丢失；缺点是数据会直接暴露在地址栏里，绝对不能用来传密码、token这类敏感信息。

来源页面跳转代码： #

import Router from 'next/router';

// 假设你已经收集好的表单数据
const collectedProps = {
  username: '前端小能手',
  phone: '138xxxx8888',
  hobby: 'coding'
};

// 用Router.push的对象形式传递query参数
Router.push({
  pathname: '/form',
  query: collectedProps
});

目标页面FormOnSubmitExample接收代码： #

import { useRouter } from 'next/router';

export default function FormOnSubmitExample() {
  const router = useRouter();
  // 注意：URL query里的所有值都是字符串类型，需要手动转换类型（比如数字、布尔值）
  const { username, phone, hobby } = router.query;

  return (
    <div className="form-container">
      <h2>接收的表单数据</h2>
      <p>用户名：{username}</p>
      <p>手机号：{phone}</p>
      <p>爱好：{hobby}</p>
    </div>
  );
}

如果要传递的是敏感数据（比如用户隐私、临时凭证），或者不想让数据出现在URL里，就用这种方法——数据会存在浏览器的History State中，不会暴露在地址栏，但刷新页面后数据会丢失（因为State存在内存里）。

来源页面跳转代码： #

import Router from 'next/router';

// 包含敏感信息的表单数据
const sensitiveProps = {
  username: '前端小能手',
  idCard: '310xxxxxxxxx1234', // 敏感信息，不能暴露在URL里
  tempToken: 'abc123xyz'
};

// 第三个参数是配置项，在这里传入state
Router.push('/form', undefined, {
  state: { formData: sensitiveProps }
});

目标页面FormOnSubmitExample接收代码： #

import { useRouter } from 'next/router';

export default function FormOnSubmitExample() {
  const router = useRouter();
  // 从router的state中取出传递的数据，注意做空值判断
  const formData = router?.state?.formData || {};

  return (
    <div className="form-container">
      <h2>接收的敏感数据</h2>
      <p>用户名：{formData.username}</p>
      <p>身份证号：{formData.idCard}</p>
      <p>临时凭证：{formData.tempToken}</p>
    </div>
  );
}

额外注意点： #

• 如果你用的是Next.js 13+的App Router（项目用app目录），next/router已经被替换成next/navigation的useRouter，但核心思路还是通过searchParams（对应Query）或者useRouter().state来接收数据，用法大同小异。
• 如果需要刷新页面后数据还能保留，那可以结合localStorage或sessionStorage，在跳转前把数据存到本地存储，目标页面再读取。

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