[react-fullpage] 리액트 화면 딱맞게 스크롤 되는거 새로고침문제

https://www.npmjs.com/package/react-fullpage

react-fullpage

 

웹 사이트에서 스크롤 했을때 딱 맞게 스르륵 스크롤되는걸

fullpage, onepage라고 한다..

 

직접 구현하기 귀찮아서 위의 라이브러리를 사용해서 구현했다.

그런데 문제가 생긴게 

페이지마다 해쉬주소가 바뀌는데

바뀐상태에서 새로고침을 하면 해시주소는 그대로인데 첫페이지로 간다는 것이다.....

 

해결법

"use client";
import React, { useEffect, useState } from "react";
import Main from "../../components/main";
import styles from "../../styles/home.module.css";
import About from "../../components/about";
import { SectionsContainer, Section } from "react-fullpage";

function Home() {
  const [initialActiveSection, setInitialActiveSection] = useState(null);
  const onScroll = (p) => {
    if (initialActiveSection === null) setInitialActiveSection(p.activeSection);
  };
  let options = {
    scrollCallback: onScroll,
    sectionClassName: "section",
    anchors: ["main", "about"],
    scrollBar: false,
    navigation: true,
    verticalAlign: false,
    arrowNavigation: true,
  };
  return (
    <SectionsContainer {...options} activeSection={initialActiveSection}>
      <Section>
        <Main />
      </Section>
      <Section>
        <About />
      </Section>
    </SectionsContainer>
  );
}

export default Home;

 

스크롤콜백함수를 만들어서 넣으니 해결되었다.

구글링했을때 해결법이 잘안나와서 여기에 기록용으로 쓴다.

 

 

참고링크

https://github.com/subtirelumihail/react-fullpage/issues/46

When I refresh my page, the fullpage always roll back to the first screen but hash value don't change. · Issue #46 · subtirelu