How do I change the route as I scroll?

I’m making my portfolio with fullpage.js and I wanted to add a route every time I get to the next element as I scroll. For example: when I open the page I get the<Home /> element in that section I want to put the router /#home when scrolling to the 2nd element <About /> the router /#about is placed, and so on, as I do this?

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>
                </>
                );
            }}
        />
        </>
    );
}

Example

                     <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

Just use the anchors option as detailed on the 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.

Alternatively you can also use the attribute data-anchor on each of your sections.

You can see examples of this on most of the examples online like this one as well as on the ones provided on the github repository.