Reactでリンクをクリックしてセクションにスクロールさせる方法

1. ネイティブなJavaScriptのスクロール処理を使用する方法:

import React from 'react';
class ScrollToSection extends React.Component {
  scrollToSection(sectionId) {
    const section = document.getElementById(sectionId);
    section.scrollIntoView({ behavior: 'smooth' });
  }
  render() {
    return (
      <div>
        <nav>
          <a href="#" onClick={() => this.scrollToSection('section1')}>
            セクション1にスクロール
          </a>
          <a href="#" onClick={() => this.scrollToSection('section2')}>
            セクション2にスクロール
          </a>
          <a href="#" onClick={() => this.scrollToSection('section3')}>
            セクション3にスクロール
          </a>
        </nav>
        <div id="section1">セクション1</div>
        <div id="section2">セクション2</div>
        <div id="section3">セクション3</div>
      </div>
    );
  }
}
export default ScrollToSection;

2. React-scroll ライブラリを使用する方法:

import React from 'react';
import { Link, Element } from 'react-scroll';
class ScrollToSection extends React.Component {
  render() {
    return (
      <div>
        <nav>
          <Link to="section1" smooth={true} duration={500}>
            セクション1にスクロール
          </Link>
          <Link to="section2" smooth={true} duration={500}>
            セクション2にスクロール
          </Link>
          <Link to="section3" smooth={true} duration={500}>
            セクション3にスクロール
          </Link>
        </nav>
        <Element name="section1">セクション1</Element>
        <Element name="section2">セクション2</Element>
        <Element name="section3">セクション3</Element>
      </div>
    );
  }
}
export default ScrollToSection;

これらの方法を使用すると、リンクをクリックすると指定したセクションにスムーズにスクロールすることができます。適切な方法を選択し、プロジェクトに組み込んでみてください。