Reactjs 如何在'；反应'；或者如何更改在react中滚动的window.loaction.hash

我正在使用react，我正在构建一个单页应用程序，我不想使用react路由器 我只有一个页面和部分，每个部分（或react中的组件）都有一个散列，我想在scroll上更改活动导航链接，或者我想在scroll上更改窗口位置散列，以便活动类在scroll上工作。。。。 请帮忙

  const ref = React.useRef(null);
 

  const handleScroll = () => {
    if (ref.current ) {
      setSticky(ref.current.getBoundingClientRect().top <= 0);
    }
    

  };

  
  React.useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    window.addEventListener("scroll", () => {
      setScroll(window.scrollY > 200 );
  
    });
   
    return () => {
      window.removeEventListener('scroll', () => handleScroll);
    };
    
  }, []);
    return (<Container fluid className='p-0'>
<Navbar  ref={ref}  fixed={isSticky ? 'top': '' } className='nav_bar ' expand="lg">
  <Navbar.Toggle  aria-controls="basic-navbar-nav" ><FontAwesomeIcon style={{color:'#fff'}} icon={faBars}/></Navbar.Toggle>
  <Navbar.Collapse id="basic-navbar-nav">
  <Nav className='ml-5'>
  <Nav.Item>
    <Nav.Link  className={`${scroll  ? 'active':''} nav_link px-5`}   href="#home">home</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link  className={`${scroll   ? 'active':''} nav_link px-5`} href='#about' >about</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link  className={`${scroll   ? 'active':''} nav_link px-5`} href='#portfolio' >portfolio</Nav.Link>
  </Nav.Item>
  <Nav.Item>
    <Nav.Link  className={`${scroll   ? 'active':''} nav_link px-5`} href='#contact' > contact
    </Nav.Link>
  </Nav.Item>
</`Nav`>
  </`Navbar.Collapse`>
</`Navbar`></Container>
        );
}
i tried this method but i failed and all links show active at once

const ref=React.useRef（null）；
常量handleScroll=（）=>{
如果（参考电流）{
setSticky（参考当前的getBoundingClientRect（）.top{
window.addEventListener（'scroll'，handleScroll）；
window.addEventListener（“滚动”，（）=>{
设置滚动（窗口滚动>200）；
});
return（）=>{
removeEventListener（'scroll'，（）=>handleScroll）；
};
}, []);
返回(
家
关于
文件夹
接触
);
}
我尝试了这个方法，但失败了，所有链接都立即显示为活动状态