Using Fullpagejs with react-router-dom

I am building a website using Fullpage.js, React, and react-router-dom. I create a Link in the second section in the Fullpage component, and I want this Link can take me to another route (/anotherPage):

// Fullpage.js
import React, { useEffect } from "react";
import { Link } from "react-router-dom";

import { initFullpage } from "./initFullpage";

const Fullpage = () => {
  useEffect(() => {
    initFullpage();
  }, []);

  return (
    <div id="fullpage">
      <div class="section">Some section</div>
      <div class="section">
        <Link to="/anotherPage">
          Go to a special page.
        </Link>
      </div>
      <div class="section">Some section</div>
      <div class="section">Some section</div>
    </div>
  );
};

export default Fullpage;

Additionally, I need another Link to go back from /anotherPage route back to the second section in the Fullpage component.

I made a demo here.

As you can try, if you click the link on the second section, react can route you to AnotherPage, but the navigation dots provide by Fullpage package is still there, and you can even scroll up and down, though this will cause errors. Also, if you click Go back, it will also break the App.

How to do it right? Thanks for your help!

Here is my App.js:

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Fullpage from "./components/Fullpage";
import AnotherPage from "./components/AnotherPage";

export default function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <Fullpage />
        </Route>
        <Route exact path="/anotherPage">
          <AnotherPage />
        </Route>
      </Switch>
    </Router>
  );
}

Solution

I found I don't need to use Fullpage.js to achieve the "scroll-full-page" effect. It's actually easy to achieve by CSS. Have a look at scroll-snap-type.

// index.html
<div class="container">
  <section class="page">
    Page one
  </section>
  <section class="page">
    Page two
  </section>
</div>

// css
.container{
  width: 100%;
  height: 100vh;
  scroll-snap-type: y mandatory;
  overflow: auto;
}

.page{
  scroll-snap-align: start;
  height: 100vh;
}

Then you can have Fullpage.js type scrolling effect. Then you can use react-router-dom without problem.