本文详解如何在 Next.js 页面中正确响应 URL 查询参数（如邀请码 token），结合 useRouter 的 isReady 和 useSWR 的条件取数机制，避免 Hooks 调用违规、闪屏及状态竞态问题，实现注册页的优雅条件渲染。
本文详解如何在 next.js 页面中正确响应 url 查询参数（如邀请码 token），结合 `userouter` 的 `isready` 和 `useswr` 的条件取数机制，避免 hooks 调用违规、闪屏及状态竞态问题，实现注册页的优雅条件渲染。
在 Next.js 应用中，常需根据 URL 查询参数（如 ?token=abc123）动态调整页面行为——例如复用注册页支持「带邀请链接的预填充注册」。但若直接在条件分支中调用 useSWR 等 Hook，会违反 React 的 Rules of Hooks，触发 Rendered more hooks than during the previous render 错误。根本原因在于：Hook 调用顺序必须严格一致，而 if 语句会导致某些渲染周期跳过 Hook，破坏一致性。
正确的解法是将条件逻辑前置到 Hook 参数中，而非控制 Hook 的执行与否。useSWR 官方明确支持条件取数（Conditional Fetching）：当传入 null 或 false 作为 key 时，SWR 自动跳过请求，且不触发任何副作用。
以下是优化后的完整实现方案：
import { useRouter } from 'next/router'; import useSWR from 'swr'; import axios from 'axios'; import { useAuth } from '@/hooks/useAuth'; // 假设为自定义认证 Hook import PageLoader from '@/components/PageLoader'; const Register = () => { const { query: { token }, isReady, // ✅ 关键：确保路由参数已解析完成 } = useRouter(); const { register, isLoading: isAuthLoading } = useAuth({ middleware: 'guest', redirectIfAuthenticated: '/dashboard', }); // ✅ 正确：key 为 null 时 SWR 不发起请求；isReady 保证 token 不为 undefined const { data: inviteData, error: inviteError, isLoading: isInviteLoading, } = useSWR( isReady && token ? `/api/retrieve-invite/${token}` : null, (url) => axios.get(url).then((res) => res.data.data) ); const submitForm = async (event: React.FormEvent) => { event.preventDefault(); // 表单提交逻辑（含预填充 email 处理） }; // ✅ 统一加载态：等待路由就绪 + 认证初始化 + 邀请数据（若存在） if (!isReady || isAuthLoading || isInviteLoading) { return <PageLoader />; } // ✅ 错误处理：仅当 token 存在且请求失败时展示提示 if (token && inviteError) { return ( <div className="text-red-500 p-4 bg-red-50 rounded"> 邀请码无效或已过期，请检查链接或联系管理员。 </div> ); } // ✅ 渲染主体：此处可安全访问 inviteData?.email 进行预填充 return ( <div className="max-w-md mx-auto p-6"> <h1 className="text-2xl font-bold mb-6"> {token ? '受邀注册' : '创建账户'} </h1> <form onSubmit={submitForm}> <input type="email" name="email" defaultValue={inviteData?.email || ''} placeholder="邮箱地址" disabled={!!inviteData} // 可选：锁定受邀邮箱 className="w-full p-2 border rounded mb-4" /> {/* 其他字段：first_name, last_name 等 */} <button type="submit" disabled={isAuthLoading} className="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700" > {token ? '确认受邀注册' : '立即注册'} </button> </form> </div> ); }; export default Register;
关键要点总结：
- ✅ 永远不要在 if / for / 条件表达式中调用 Hook：useSWR 必须在顶层调用，通过 key 参数控制是否取数；
- ✅ 依赖 useRouter().isReady：它标识路由参数（query）已完全解析，避免 token 为 undefined 导致错误请求；
- ✅ 统一加载态判断：将 isReady、认证加载态、邀请数据加载态合并为单一 PageLoader 触发条件，消除“先显示空白表单再闪现预填充”的体验断层；
- ✅ 服务端友好：该方案完全在客户端执行，不影响 SSR/SSG；若需服务端校验 token，应配合 getServerSideProps 实现重定向或初始数据注入；
- ⚠️ 注意错误边界：inviteError 仅在请求失败时存在，需显式判断 token && inviteError，避免对无 token 场景误判。
通过此模式，你不仅能彻底规避 Hooks 报错，还能构建出响应迅速、逻辑清晰、用户体验一致的动态注册流程。