如何在滚动时更改路线？

问题描述

我正在使用 fullpage.js 制作我的作品集，我想在每次滚动时到达下一个元素时添加一条路线。例如：当我打开页面时，我在该部分得到 <Home /> 元素我想在滚动到第二个元素时放置路由器 /#home <About /> 路由器 /#about 被放置，所以在，因为我这样做？

const Fullpagescroll = () =>{
    return (
        <>
        <Header />
        <ReactFullpage
            scrollingSpeed = {1150}
            navigation
            render={() => {
                return (
                <>
                    <div className='section'>
                        <Home />
                    </div>
                    <div className='section'>
                        <About />
                    </div>
                    <div className='section'>
                        <Project />
                    </div>
                    <div className='section'>
                        <Contact />
                    </div>
                </>
                );
            }}
        />
        </>
    );
}

示例

                     <Router>
                        <div className='section' >
                            <Route path='/#home'>
                                <Home />
                            </Route>
                        </div>
                        <div className='section'>
                            <Route path='/#about'>
                                <About />
                            </Route>
                        </div>
                        <div className='section'>
                            <Route path='/#project'>
                                <Project />
                            </Route>
                        </div>
                        <div className='section'>
                            <Route path='/#contact'>
                                <Contact />
                            </Route>
                        </div>
                    </Router>

解决方法

只需使用 the fullpage.js documentation 中详述的 anchors 选项：

锚点：（默认 []）定义要在每个部分的 URL 上显示的锚点链接 (#example)。锚点值应该是唯一的。数组中锚点的位置将定义锚点应用于哪些部分。 （第二部分的第二个位置，依此类推）。通过浏览器也可以使用锚向前和向后导航。此选项还允许用户为特定部分或幻灯片添加书签。当心！锚点不能与站点上的任何 ID 元素（或 IE 的 NAME 元素）具有相同的值。现在可以使用属性 data-anchor 直接在 HTML 结构中定义锚点，如下所述。

或者，您也可以在每个部分使用属性 data-anchor。

您可以在 most of the examples online 上（例如 this one）以及 the ones provided on the github repository 上看到此类示例。