使用react钩子和react路由器的nav消失组件

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

const NavDisappear = () => {
  const [isVisible, setIsVisible] = useState(true);
  const location = useLocation();

  useEffect(() => {
    const handleScroll = () => {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      setIsVisible(scrollTop === 0);
    };

    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [location]);

  return (
    <nav style={{ display: isVisible ? 'block' : 'none' }}>
      {/* 导航栏内容 */}
    </nav>
  );
};

export default NavDisappear;