滚动时如何更改路线？

Question

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

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>

Answer 1

只需使用anchors 选项，详细信息请参见the fullpage.js documentation：

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

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

您可以在most of the examples online 上看到这样的示例，例如this one 以及the ones provided on the github repository。