在 Next.js App Router 的日常开发中，有一个令人颇为困扰的异常现象——当服务端执行 `redirect()` 跳转后，目标页面竟然无法正常滚动。没错，页面已经渲染完成，内容也完整显示，但垂直滚动条仿佛凭空消失。这个问题在 Next.js 13.5.4 版本中尤为突出。
先给出结论：该问题的根本原因在于，Next.js 为了优化页面过渡动画的效果，在服务端跳转过程中，会临时将页面 `` 的 `overflow` 属性设置为 `hidden`，以避免页面切换时出现滚动条抖动。但关键在于，**这个状态并未被正确恢复**，导致目标页面渲染完成后，`document.body.style.overflow` 始终卡在 `'hidden'`，只有手动刷新页面才能恢复正常。这显然是一个状态残留的 Bug。
那么，如何在不改动业务逻辑的前提下，安全地修复此问题？核心思路非常简单：在目标页面的客户端组件中，利用 `useEffect` 主动将滚动能力“抢回”，并确保组件卸载时做好善后处理。
来看具体的代码实现：
```typescript
'use client';
import { useEffect } from 'react';
export default function ScrollFixPage() {
useEffect(() => {
// 保存原始 overflow 值（兼容内联样式与 CSS reset）
const originalOverflow = document.body.style.overflow;
// 强制启用滚动
document.body.style.overflow = 'auto';
// 清理函数：组件卸载时恢复原始值（避免影响其他路由或全局状态）
return () => {
document.body.style.overflow = originalOverflow;
};
}, []);
return (
滚动已恢复
{[...Array(50)].map((_, i) => (
第 {i + 1} 行内容 — 现在可以正常滚动查看全部内容
))}
