如何在'React'中滚动时更改导航链接活动类或如何在 React 中滚动时更改 window.loaction.hash

Question

我正在使用react，我正在构建一个单页应用程序，我不想使用react路由器我只有一个页面和部分，每个部分(或react中的组件(都有一个哈希，我希望活动导航链接在滚动时更改，或者我希望在滚动时改变窗口位置哈希，以便活动类在滚动时工作。。。。请帮助

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

Answer 1

react scroll中有一个Link组件，它包含三个道具：activeClass、spy和to。activeClass->滚动结束后更改导航栏中列表元素的样式组件。间谍->告诉react滚动使哪个元素处于活动状态或将activeClass应用于哪个元素。至->是它应该滚动到的元素。

如何包装元素的示例。

<Link activeClass="active" smooth spy to="about">About </Link>