Next.js中如何携带数据/属性进行页面重定向？

当然可以在Next.js重定向时传递数据，针对你提到的「注册页跳登录页自动填充邮箱」的场景，下面是几种简洁的实现方式：

1. URL查询参数（最推荐） #

这是最直接简洁的方案，适合表单预填这类不需要隐藏的数据场景：

• 在注册页触发重定向时，把邮箱放在URL的query参数中：

import { useRouter } from 'next/router'; // Pages Router
// 或 import { useRouter } from 'next/navigation'; // App Router

const router = useRouter();

const handleGoToLogin = (userEmail) => {
  router.replace({
    pathname: '/login',
    query: { email: userEmail }
  });
};

• 在登录页读取参数并填充表单：
  • Pages Router：

  import { useRouter } from 'next/router';
  import { useState } from 'react';
  
  const LoginPage = () => {
    const router = useRouter();
    const [email, setEmail] = useState(router.query.email || '');
    
    // 渲染表单...
  };
  

  • App Router：

  import { useSearchParams } from 'next/navigation';
  import { useState, useEffect } from 'react';
  
  const LoginPage = () => {
    const searchParams = useSearchParams();
    const [email, setEmail] = useState('');
  
    useEffect(() => {
      const emailParam = searchParams.get('email');
      if (emailParam) setEmail(emailParam);
    }, [searchParams]);
    
    // 渲染表单...
  };
  

这种方式的优势是简单无依赖，刷新页面后数据不会丢失，完全匹配你的需求。

2. 临时全局状态（适合非公开数据） #

如果不想把数据暴露在URL中，可以用轻量状态管理工具（如Zustand、Jotai）或React Context存储临时数据：

• 创建临时状态存储：

// stores/tempRedirectStore.js
import { create } from 'zustand';

export const useTempRedirectStore = create((set) => ({
  redirectData: null,
  setRedirectData: (data) => set({ redirectData: data }),
  clearRedirectData: () => set({ redirectData: null }),
}));

• 注册页设置数据并重定向：

import { useRouter } from 'next/navigation';
import { useTempRedirectStore } from '@/stores/tempRedirectStore';

const RegisterPage = () => {
  const router = useRouter();
  const { setRedirectData } = useTempRedirectStore();

  const handleGoToLogin = (userEmail) => {
    setRedirectData({ email: userEmail });
    router.replace('/login');
  };
};

• 登录页读取并清空数据：

import { useState, useEffect } from 'react';
import { useTempRedirectStore } from '@/stores/tempRedirectStore';

const LoginPage = () => {
  const [email, setEmail] = useState('');
  const { redirectData, clearRedirectData } = useTempRedirectStore();

  useEffect(() => {
    if (redirectData?.email) {
      setEmail(redirectData.email);
      clearRedirectData(); // 用完立即清空，避免重复填充
    }
  }, [redirectData]);
};

注意：这种方式下如果用户刷新登录页，临时状态会丢失，若需要持久化可结合localStorage，但记得及时清理避免残留数据。

3. 服务器端重定向传参 #

如果是在服务器组件或API路由中处理重定向，可以直接用Next.js的redirect函数携带query参数：

// app/api/check-email/route.js
import { redirect } from 'next/navigation';

export async function POST(request) {
  const { email } = await request.json();
  // 模拟检查邮箱已存在的逻辑
  const emailExists = true;
  
  if (emailExists) {
    redirect(`/login?email=${encodeURIComponent(email)}`);
  }
}

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