如何在React上实现“跳到内容”网页辅助功能？

import React, { useRef } from 'react';

function App() {
  const contentRef = useRef(null);

  const scrollToContent = () => {
    contentRef.current.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <div>
      <header>
        <nav>
          <ul>
            <li><a href="#content" onClick={scrollToContent}>跳到内容</a></li>
            {/* 其他导航链接 */}
          </ul>
        </nav>
      </header>

      <main>
        {/* 其他内容区块 */}
        <div ref={contentRef}>
          {/* 主要内容区块 */}
        </div>
      </main>

      <footer>
        {/* 页脚内容 */}
      </footer>
    </div>
  );
}

export default App;