1

我正在使用react-scroll从导航滚动到任何预设的锚元素。我之所以选择它，是因为当元素在视口中时
，它还为 Nav 项提供了一个类。active

如果我在主页上，则此示例有效。但是，如果我从另一个页面单击导航栏项目，它将不起作用。

我还需要从另一个页面进行滚动工作。

需要提到的是，所有锚元素都在主页上并create-react-app使用v5 router.

CODESANDBOX 示例
Github 问题链接

PS：如果您知道任何更好的库可以做到这一点并添加active课程，请在此处发布。

import { Element} from 'react-scroll';

export function HomePage() {
    return (
        <>
                <title>Home</title>
                <Banner />

                <Element name="price-plan-list">
                    <PriceplanList />
                </Element>

                <Element name="entertainment-area">
                    <EntertainmentArea />
                </Element>
        </>
    );
}

这是 NavbarItem：

import { Link as AnchorLink } from 'react-scroll';

        <NavItem key={index}>
            <AnchorLink
                activeClass="active"
                to={item.link}
                spy={true}
                hashSpy={true}
                duration={1000}
            >
                {item.title}
            </AnchorLink>
        </NavItem>
4

0 回答 0