小妙招：轻松实现兼容hash路由的页面内锚点跳转组件

前端

2023-03-27 14:34:58

轻松实现兼容 Hash 路由的页面内锚点跳转

页面内锚点跳转看似简单，但其中隐藏着一些细微差别。本文将揭秘如何轻松实现兼容 Hash 路由的页面内锚点跳转组件，帮助您解决在使用 Hash 路由时遇到的问题。

锚点跳转的原理

锚点跳转是一种通过在 URL 中添加锚点符号（#）来链接到页面特定位置的技术。当用户点击锚点链接时，浏览器将滚动到与该锚点关联的位置。

在 React 中实现锚点跳转

在 React 中，实现锚点跳转有两种常见方法：

使用原生 HTML 的 a 标签： 此方法简单直接，但功能有限，例如无法自动高亮显示锚点链接。
使用第三方库： 诸如 react-anchor-link-smooth-scroll 等第三方库提供了更丰富的功能，例如平滑滚动和自动高亮显示。

兼容 Hash 路由

然而，第三方库通常与 Hash 路由不兼容，这可能会导致锚点跳转无法正常工作。为此，本文提供了兼容 Hash 路由的简易锚点目录跳转组件。

AnchorLink 组件

AnchorLink 组件提供了页面滚动时自动高亮显示锚点链接、点击锚点链接时平滑滚动到对应位置等功能。以下是其用法示例：

import AnchorLink from './AnchorLink';

const App = () => {
  return (
    <div>
      <h1>标题 1</h1>
      <AnchorLink href="#section1">锚点 1</AnchorLink>
      <div id="section1">
        <h2>内容 1</h2>
      </div>
      <h1>标题 2</h1>
      <AnchorLink href="#section2">锚点 2</AnchorLink>
      <div id="section2">
        <h2>内容 2</h2>
      </div>
    </div>
  );
};

export default App;

代码示例：

import { useState, useEffect } from 'react';

const AnchorLink = ({ href, children }) => {
  const [active, setActive] = useState(false);

  useEffect(() => {
    const hash = window.location.hash;
    if (hash === href) {
      setActive(true);
    } else {
      setActive(false);
    }
  }, [href]);

  const handleClick = (e) => {
    e.preventDefault();
    window.location.hash = href;
  };

  return (
    <a href={href} onClick={handleClick} className={active ? 'active' : ''}>
      {children}
    </a>
  );
};

export default AnchorLink;