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

npm install fullpage.js react-router-dom

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import ReactFullpage from '@fullpage/react-fullpage';

const App = () => {
  return (
    <Router>
      <ReactFullpage
        // Fullpagejs配置项
        licenseKey={'YOUR_KEY'}
        scrollingSpeed={1000}
        navigation
        sectionsColor={['#f1f1f1', '#fff', '#f1f1f1']}
        render={({ state, fullpageApi }) => {
          return (
            <ReactFullpage.Wrapper>
              <div className="section">
                <h1>Section 1</h1>
              </div>
              <div className="section">
                <h1>Section 2</h1>
              </div>
              <div className="section">
                <h1>Section 3</h1>
              </div>
            </ReactFullpage.Wrapper>
          );
        }}
      />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
};

const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Page</h1>;
const Contact = () => <h1>Contact Page</h1>;

export default App;