在 Next.js 13 的 App Router 中，客户端组件无法直接调用服务端重定向（如 redirect()），而 useRouter().push() 必须在组件顶层正确调用；本文详解如何在 use client 组件中实现 API 调用后的页面跳转，并规避常见 Hook 和服务端/客户端边界错误。
在 next.js 13 的 app router 中，客户端组件无法直接调用服务端重定向（如 `redirect()`），而 `userouter().push()` 必须在组件顶层正确调用；本文详解如何在 `use client` 组件中实现 api 调用后的页面跳转，并规避常见 hook 和服务端/客户端边界错误。
在 Next.js 13+ 的 App Router 架构下，服务端组件（Server Components）与客户端组件（Client Components）有严格的运行时边界。你遇到的两个典型错误——NEXT_REDIRECT 错误和 Invalid hook call——正源于这一边界约束：
- redirect() 是仅限服务端组件使用的 React Server Component 指令，在客户端组件中调用会触发 NEXT_REDIRECT 异常，因为它依赖服务端渲染上下文；
- useRouter() 是客户端专属 Hook，必须在组件函数体顶层（而非事件处理函数内部）调用；将其放在 handleDelete 内部会导致 React Hook 规则违规，引发“Invalid hook call”。
✅ 正确做法是：在客户端组件顶层初始化 router，并在异步操作完成后调用 router.push() 实现导航。
以下是修正后的完整实现（含关键注释）：
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
// DeleteAddressAlertDialog.tsx
'use client'; // ⚠️ 必须显式声明为客户端组件
import { useRouter } from 'next/navigation';
interface DeleteAddressAlertDialogProps {
contactId: number;
addressId: number;
}
export default function DeleteAddressAlertDialog({
contactId,
addressId
}: DeleteAddressAlertDialogProps) {
const router = useRouter(); // ✅ 在组件顶层调用，符合 Hook 规则
const handleDelete = async () => {
try {
await deleteAddress(contactId, addressId);
// ✅ 客户端导航：跳转至 /settings（支持前进/后退）
router.push('/settings');
// 可选：添加平滑过渡或加载状态
// router.refresh(); // 若需刷新当前页面数据（非跳转），可配合 useTransition 使用
} catch (error) {
console.error('Failed to delete address:', error);
// ? 建议：此处可集成 toast 或状态管理提示用户
}
};
return (
<button onclick="{handleDelete}" classname="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition">
删除地址
</button>
);
}
// 封装服务端逻辑调用（保持客户端组件纯净）
async function deleteAddress(contactId: number, addressId: number) {
const res = await fetch(`${process.env.BASE_API_URL}/addresses/${addressId}`, {
method: 'DELETE',
cache: 'no-cache',
headers: { 'Content-Type': 'application/json' },
});
if (!res.ok) {
throw new Error(`HTTP ${res.status}: ${res.statusText}`);
}
}
? 重要注意事项：
- 不要在服务端组件中调用 useRouter 或 router.push —— 这些 API 仅存在于浏览器环境；
- 避免混合重定向策略：若需服务端跳转（如登录后保护路由），应将操作入口保留在服务端组件中，通过表单提交或 redirect() 实现；
-
router.push() vs router.replace()：
- push() 保留历史记录（用户可点击浏览器「返回」回到原页）；
- replace() 替换当前历史条目（适合删除后不希望用户返回操作页的场景）；
- 增强用户体验：建议在 handleDelete 中添加 useState 管理 loading 状态，并禁用按钮防止重复提交；
- 错误边界：生产环境应使用 ErrorBoundary 或全局异常处理器捕获未预期错误，而非仅 console.error。
总结而言，在 Next.js 13 的混合渲染模型中，客户端组件内异步操作后的跳转，唯一可靠且推荐的方式是 useRouter().push()（或 replace()），前提是严格遵守 React Hook 规则并确保组件标记为 'use client'。这是官方文档明确支持的客户端导航方案，兼顾可预测性、可调试性与标准 Web 行为一致性。
