Next.js页面间非URL传参方案咨询：注册后跳转传数据

结合你提到的「需先验证邮箱/操作数据库、不能用URL传参、程序化跳转传状态/邮箱/注册量」的需求，以下是不同技术栈下的可行方案：

1. React Router 编程式导航 + State 传参（React 场景） #

因为你提到无法直接用Link组件，React Router的useNavigate钩子支持编程式跳转时携带不暴露在URL的state数据，完全符合需求。

注册页实现： #

import { useNavigate } from 'react-router-dom';

function RegisterPage() {
  const navigate = useNavigate();

  const handleSubmit = async (e) => {
    e.preventDefault();
    const email = e.target.email.value;
    
    // 1. 邮箱有效性验证
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      alert('请输入有效的邮箱地址');
      return;
    }

    // 2. 数据库存储操作
    let result = { success: false, totalUsers: 0 };
    try {
      const res = await fetch('/api/register', {
        method: 'POST',
        body: JSON.stringify({ email }),
        headers: { 'Content-Type': 'application/json' }
      });
      result = await res.json();
    } catch (err) {
      console.error('注册请求失败:', err);
    }

    // 3. 携带state跳转结果页
    navigate('/register-result', {
      state: {
        email,
        success: result.success,
        totalUsers: result.totalUsers
      }
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" placeholder="输入邮箱地址" required />
      <button type="submit">提交注册</button>
    </form>
  );
}

结果页读取参数： #

import { useLocation } from 'react-router-dom';

function RegisterResultPage() {
  const location = useLocation();
  // 解构state，加默认值避免刷新后数据丢失报错
  const { email = '', success = false, totalUsers = 0 } = location.state || {};

  return (
    <div className="result-container">
      <h2>{success ? '✅ 注册成功' : '❌ 注册失败'}</h2>
      <p>您的邮箱：{email}</p>
      <p>当前累计注册用户：{totalUsers}人</p>
    </div>
  );
}

注意：state数据仅存在于会话中，刷新结果页会丢失。如果需要持久化，可以结合localStorage存储关键数据，刷新时优先读取本地存储。

2. Vue Router 编程式导航 + State 传参（Vue 场景） #

如果是Vue项目，使用useRouter（Vue3）或this.$router（Vue2）的push方法携带state参数：

注册页逻辑： #

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();

const handleSubmit = async (email) => {
  // 邮箱验证
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    alert('无效的邮箱格式');
    return;
  }

  // 数据库操作
  let result = { success: false, totalUsers: 0 };
  try {
    const res = await fetch('/api/register', {
      method: 'POST',
      body: JSON.stringify({ email }),
      headers: { 'Content-Type': 'application/json' }
    });
    result = await res.json();
  } catch (err) {
    console.error(err);
  }

  // 跳转并传参
  router.push({
    path: '/register-result',
    state: { email, success: result.success, totalUsers: result.totalUsers }
  });
};
</script>

<template>
  <form @submit.prevent="handleSubmit(email)">
    <input v-model="email" type="email" placeholder="输入邮箱" required />
    <button type="submit">注册</button>
  </form>
</template>

结果页读取数据： #

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
const { email = '', success = false, totalUsers = 0 } = route.state || {};
</script>

<template>
  <div>
    <h2>{{ success ? '注册成功' : '注册失败' }}</h2>
    <p>邮箱：{{ email }}</p>
    <p>累计注册量：{{ totalUsers }}</p>
  </div>
</template>

3. 全局状态管理方案（Redux/Pinia） #

如果项目已经使用全局状态管理库，可以把注册结果存入状态，跳转后直接读取，无需依赖路由传参：

以Pinia（Vue）为例： #

1. 定义注册状态store：

// stores/register.js
import { defineStore } from 'pinia';

export const useRegisterStore = defineStore('register', {
  state: () => ({
    email: '',
    success: false,
    totalUsers: 0
  }),
  actions: {
    setRegisterData(data) {
      this.email = data.email;
      this.success = data.success;
      this.totalUsers = data.totalUsers;
    }
  }
});

2. 注册页更新状态并跳转：

<script setup>
import { useRegisterStore } from '@/stores/register';
import { useRouter } from 'vue-router';
const registerStore = useRegisterStore();
const router = useRouter();

const handleSubmit = async (email) => {
  // 验证和数据库操作...
  registerStore.setRegisterData({
    email,
    success: result.success,
    totalUsers: result.totalUsers
  });
  router.push('/register-result');
};
</script>

3. 结果页读取状态：

<script setup>
import { useRegisterStore } from '@/stores/register';
const registerStore = useRegisterStore();
</script>

<template>
  <div>
    <h2>{{ registerStore.success ? '注册成功' : '注册失败' }}</h2>
    <p>邮箱：{{ registerStore.email }}</p>
    <p>累计注册量：{{ registerStore.totalUsers }}</p>
  </div>
</template>

React + Redux的实现逻辑类似：注册页dispatch action更新状态，结果页用useSelector读取即可。

4. SessionStorage 临时存储 #

如果不想依赖路由或状态管理，可用sessionStorage临时存储数据，跳转后读取并删除：

注册页： #

const handleSubmit = async (e) => {
  e.preventDefault();
  const email = e.target.email.value;
  
  // 验证和数据库操作...
  
  // 存储数据到sessionStorage
  const registerData = { email, success: result.success, totalUsers: result.totalUsers };
  sessionStorage.setItem('registerResult', JSON.stringify(registerData));
  
  // 跳转结果页
  window.location.href = '/register-result';
};

结果页： #

window.addEventListener('DOMContentLoaded', () => {
  const dataStr = sessionStorage.getItem('registerResult');
  if (!dataStr) return;
  
  const data = JSON.parse(dataStr);
  // 渲染页面内容
  document.getElementById('status').textContent = data.success ? '注册成功' : '注册失败';
  document.getElementById('email').textContent = data.email;
  document.getElementById('total').textContent = data.totalUsers;
  
  // 读取后删除数据，避免刷新重复读取
  sessionStorage.removeItem('registerResult');
});

内容的提问来源于stack exchange，提问作者The.lYNCAN