将 Fullpagejs 与 react-router-dom 一起使用

Question

我正在使用 Fullpage.js、React 和 react-router-dom 构建网站。我在 Fullpage 组件的第二部分创建了一个 Link，我希望这个 Link 可以带我到另一个 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;

此外，我需要另一个 Link 从 /anotherPage 路由返回到 Fullpage 组件中的第二部分。

我在这里做了一个demo

您可以试试，如果您点击第二部分的 link，react 可以将您转到 AnotherPage，但是 navigation 点由 Fullpage 包还在，你甚至可以上下滚动，虽然这会导致错误。另外，如果你点击Go back，它也会破坏应用程序。

怎么做才对？感谢您的帮助！

这是我的 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>
  );
}

Answer 1

我发现我不需要使用 Fullpage.js 来实现“滚动整页”的效果。 CSS其实很容易实现。看看 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;
}

然后就可以有Fullpage.js类型的滚动效果了。然后就可以正常使用react-router-dom了

将 Fullpagejs 与 react-router-dom 一起使用

Using Fullpagejs with react-router-dom

reactjs

react-router-dom

fullpage.js