使用 useRef 反应滚动导航

Question

我正在尝试制作一个单页应用程序，您可以在其中单击链接并向下滚动到与菜单项对应的部分。我花了几天时间研究适合我的标准的修复程序，不幸的是，我的运气很差。

我的标准如下：

• 没有外部依赖
• 必须在地址栏中包含 url（以允许直接链接到特定部分）
• 不得乱七八糟（即将网址注入地址栏）
• 必须尽可能简单

我希望这不是要求太多。

您可以玩一下我的 CodeSandbox Here。叉子表示赞赏！

Answer 1

您可以使用forwardRef HOC 包装每个部分。为每个部分创建并设置一个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>
  );
}