React+React Router单页应用：页面切换后body高度未自适应问题

这个场景我在项目里也遇到过，本质是React Router切换页面时，DOM更新完成后浏览器没有自动重新计算body的高度，导致之前长列表撑开的body高度残留了下来。下面给你几个实用的解决方案：

1. 全局监听路由变化，强制重置Body高度 #

利用React Router的useLocation钩子监听路径变化，每次页面切换后主动让body适配当前内容：

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

function App() {
  const location = useLocation();

  useEffect(() => {
    // 先把body高度设为auto，让它自动适配当前页面内容
    document.body.style.height = 'auto';
    // 触发resize事件，强制浏览器重新计算布局和滚动条
    window.dispatchEvent(new Event('resize'));
  }, [location.pathname]);

  return (
    {/* 你的路由容器组件 */}
  );
}

这个方法比较通用，不管是长页面还是短页面切换，都能自动让body高度适配当前内容。

2. 针对特定页面单独设置Body样式 #

如果只有个别页面需要固定100vh高度，可以在对应页面组件里用useEffect设置样式，离开时恢复默认：

import { useEffect } from 'react';

function FullHeightPage() {
  useEffect(() => {
    // 进入页面时强制body占满视口
    document.body.style.minHeight = '100vh';
    document.body.style.height = '100vh';
    
    // 组件卸载（页面切换）时恢复默认
    return () => {
      document.body.style.height = 'auto';
      document.body.style.minHeight = '';
    };
  }, []);

  return (
    {/* 页面内容 */}
  );
}

这种方式更精准，不会影响其他页面的正常高度逻辑。

3. 检查全局CSS的默认设置 #

有时候全局样式的错误配置会导致这个问题，确保你的全局CSS里body的基础样式是这样的：

body {
  margin: 0;
  min-height: 100vh; /* 保证短页面至少占满视口 */
  height: auto; /* 让长页面自动撑开高度 */
}

避免给body设置固定的height: 100%或者overflow: hidden，这些会干扰浏览器的高度计算逻辑。

内容的提问来源于stack exchange，提问作者白水佑哉