将 Fullpagejs 与 react-router-dom 一起使用
Using Fullpagejs with react-router-dom
我正在使用 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>
);
}
我发现我不需要使用 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
了
我正在使用 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>
);
}
我发现我不需要使用 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
了