React Router单页项目（Create React App构建）：仅在Products页面控制Header显示异常及报错问题求助

咱们先拆解下你遇到的两个核心问题：

1. 离开Products页面后，滚动监听逻辑依然在运行，影响其他页面
2. 其他页面没有header或slide-down元素，导致获取DOM节点时返回null，触发TypeError: Cannot read property 'style' of null

问题根源 #

你的useEffect没有设置清理函数，当组件卸载（比如路由切换离开Products页面）时，绑定在window上的滚动监听并没有被移除，所以逻辑会一直执行。同时其他页面不存在目标DOM元素，调用getElementById自然会拿到null，访问style就会报错。另外，直接操作DOM也不符合React的数据流最佳实践，咱们可以优化得更“React”一点。

解决方案 #

下面给你两种修复方案，从最小改动到符合React范式的优化：

方案1：添加清理函数+DOM存在性判断（快速修复）

给useEffect加上清理函数，在组件卸载时移除滚动监听；同时每次执行滚动逻辑前，先检查DOM元素是否存在：

useEffect(() => { 
  let prevScrollpos = window.pageYOffset; 

  const handleScroll = function() { 
    // 先获取DOM元素，判断是否存在
    const headerEl = document.getElementById("header");
    const slideDownEl = document.getElementById("slide-down");
    if (!headerEl || !slideDownEl) return; // 元素不存在就终止执行

    let currentScrollPos = window.pageYOffset; 
    let headerH = headerEl.clientHeight 
    if (prevScrollpos > currentScrollPos) { 
      headerEl.style.top = "0"; 
      slideDownEl.style.top = `${headerH}px`; 
    } else { 
      headerEl.style.top = `-${headerH}px`; 
      slideDownEl.style.top = "0"; 
    } 
    prevScrollpos = currentScrollPos; 
  }

  window.addEventListener('scroll', handleScroll); // 用addEventListener替代直接赋值onscroll

  // 清理函数：组件卸载时移除监听
  return () => {
    window.removeEventListener('scroll', handleScroll);
  }
}, []) // 空依赖数组确保只在组件挂载时绑定一次

方案2：改用React状态控制样式（更符合React范式）

咱们把Header的显示状态存在组件状态里，通过状态来控制样式，避免直接操作DOM：

import { useState, useEffect } from 'react';

const Products = () => {
  const [isHeaderVisible, setIsHeaderVisible] = useState(true);

  useEffect(() => {
    let prevScrollpos = window.pageYOffset;

    const handleScroll = () => {
      const currentScrollPos = window.pageYOffset;
      // 根据滚动方向更新状态
      setIsHeaderVisible(prevScrollpos > currentScrollPos);
      prevScrollpos = currentScrollPos;
    };

    window.addEventListener('scroll', handleScroll);
    // 组件卸载时移除监听
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // 获取header高度（做容错处理）
  const headerHeight = document.getElementById('header')?.clientHeight || 0;

  return (
    <div>
      <header 
        id="header" 
        style={{ top: isHeaderVisible ? '0' : `-${headerHeight}px` }}
      >
        页面Header
      </header>
      <div 
        id="slide-down" 
        style={{ top: isHeaderVisible ? `${headerHeight}px` : '0' }}
      >
        Slide-down内容
      </div>
      {/* Products页面其他内容 */}
    </div>
  );
};

export default Products;

如果你的Header是全局组件（不在Products页面内），可以通过Context或者轻量状态管理工具（比如Zustand）来共享isHeaderVisible状态，让全局Header能根据当前页面的滚动状态调整样式。

额外提示 #

• 避免直接使用window.onscroll赋值，它会覆盖之前的滚动监听，用addEventListener和removeEventListener更安全
• 尽量用React状态控制UI变化，而非直接操作DOM，这样代码更易维护，也能减少DOM相关的错误
• 如果Header是全局组件，建议把滚动监听逻辑放在Header组件内，再通过路由判断当前是否在Products页面来执行逻辑

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