React锚点标记在单击时保持重定向到页面顶部

React锚点标记是一种在单击时将页面重定向到页面顶部的技术。它通常用于创建平滑的滚动效果，并提供更好的用户体验。

React中使用锚点标记有两种常见的方式：

使用React Router：React Router是React社区中流行的路由库之一。可以使用React Router的Link组件来创建带有锚点标记的链接。在单击链接时，React Router会处理路由并平滑滚动到页面顶部。

示例代码：

import { Link } from 'react-router-dom';

function App() {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="#section1">Section 1</Link>
          </li>
          <li>
            <Link to="#section2">Section 2</Link>
          </li>
        </ul>
      </nav>

      <div id="section1">
        {/* Section 1 content */}
      </div>

      <div id="section2">
        {/* Section 2 content */}
      </div>
    </div>
  );
}

使用React Scroll：React Scroll是一个React库，用于创建平滑滚动效果。可以使用React Scroll的Link组件来创建带有锚点标记的链接。在单击链接时，React Scroll会处理滚动动画并将页面平滑滚动到指定的锚点位置。

示例代码：

import { Link } from 'react-scroll';

function App() {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="section1" smooth={true} duration={500}>
              Section 1
            </Link>
          </li>
          <li>
            <Link to="section2" smooth={true} duration={500}>
              Section 2
            </Link>
          </li>
        </ul>
      </nav>

      <div id="section1">
        {/* Section 1 content */}
      </div>

      <div id="section2">
        {/* Section 2 content */}
      </div>
    </div>
  );
}

推荐的腾讯云相关产品和产品介绍链接地址：