Реагируйте с прокруткой, используя useRef

Question

Я пытаюсь создать одностраничное приложение, в котором вы нажимаете на ссылку, и она прокручивается вниз до раздела, соответствующего пункту меню. Я потратил несколько дней на поиск исправления, соответствующего моим критериям, и, к сожалению, мне очень не повезло.

Мои критерии следующие:

• Нет внешних зависимостей
• Должен иметь URL-адрес в адресной строке (чтобы разрешить прямые ссылки на определенный раздел)
• Не должен быть хакерским (т. Е. Вставлять URL в адресную строку)
• Должно быть так просто насколько возможно

Я надеюсь, что это не требует слишком много.

Вы можете поиграть с моим CodeSandbox Здесь . Вилы ценятся!

Answer 1

Вы можете обернуть каждую секцию forwardRef HO C. Создайте и установите ref для каждого раздела и передайте ссылки компоненту заголовка, чтобы он мог вызвать функцию scrollIntoView для них.

edit Добавлен эффект для просмотра местоположения и прокрутки триггера.

const Header = ({ refs }) => {
  const location = useLocation();

  useEffect(() => {
    console.log("location", location.pathname);
    switch (location.pathname) {
      case "/about":
        scrollSmoothHandler(refs.aboutRef);
        break;
      case "/contact":
        scrollSmoothHandler(refs.contactRef);
        break;
      case "/hero":
        scrollSmoothHandler(refs.heroRef);
        break;

      default:
      // ignore
    }
  }, [location, refs]);

  const scrollSmoothHandler = ref => {
    console.log("Triggered.");
    ref.current.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <>
      <NavLink to="/hero" activeClassName="selected">
        Hero
      </NavLink>
      <NavLink to="/about" activeClassName="selected">
        About
      </NavLink>
      <NavLink to="/contact" activeClassName="selected">
        Contact
      </NavLink>
    </>
  );
};

const Hero = forwardRef((props, ref) => {
  return (
    <section ref={ref}>
      <h1>Hero Section</h1>
    </section>
  );
});

const About = forwardRef((props, ref) => {
  return (
    <section ref={ref}>
      <h1>About Section</h1>
    </section>
  );
});

const Contact = forwardRef((props, ref) => {
  return (
    <section ref={ref}>
      <h1>Contact Section</h1>
    </section>
  );
});

function App() {
  const heroRef = useRef(null);
  const aboutRef = useRef(null);
  const contactRef = useRef(null);

  return (
    <div className="App">
      <HashRouter>
        <Header refs={{ aboutRef, contactRef, heroRef }} />
        <Hero ref={heroRef} />
        <About ref={aboutRef} />
        <Contact ref={contactRef} />
      </HashRouter>
    </div>
  );
}