如何在滚动时更改路线？

Question

我正在用 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>

Answer 1

只需使用 anchors 选项，详见 the fullpage.js documentation:

anchors: (default []) Defines the anchor links (#example) to be shown on the URL for each section. Anchors value should be unique. The position of the anchors in the array will define to which sections the anchor is applied. (second position for second section and so on). Using anchors forward and backward navigation will also be possible through the browser. This option also allows users to bookmark a specific section or slide. Be careful! anchors can not have the same value as any ID element on the site (or NAME element for IE). Now anchors can be defined directly in the HTML structure by using the attribute data-anchor as explained here.

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

您可以在 most of the examples online like this one as well as on the ones provided on the github repository 上看到这方面的示例。

如何在滚动时更改路线？

How do I change the route as I scroll?

javascript

reactjs

fullpage.js