HashScrollPage.jsx

import React from "react";
import { Link } from "react-router-dom";
import { HashScroll } from "react-hash-scroll";

const HashScrollPage = () => {
  return (
    <main className="page">
      <nav>
        <ul>
          <li>
            <Link to="/hash-scroll#hash-section-1">Go To Section 1</Link>
          </li>
          <li>
            <Link to="/hash-scroll#hash-section-2">Go To Section 2</Link>
          </li>
          <li>
            <Link to="/hash-scroll#hash-section-3">Go To Section 3</Link>
          </li>
        </ul>
      </nav>
      <article>
        <HashScroll hash="#hash-section-1">
          <section>Section 1</section>
        </HashScroll>
        <HashScroll hash="#hash-section-2">
          <section>Section 2</section>
        </HashScroll>
        <HashScroll hash="#hash-section-3">
          <section>Section 3</section>
        </HashScroll>
      </article>
    </main>
  );
};

export default HashScrollPage;