Javascript Reaction在同一页内滚动导航(下拉菜单)

我正在try 使用react-scroll在我的投资组合应用程序上实现导航，它工作得很好，直到屏幕宽度改变和下拉菜单出现，因为我的所有组件都呈现在同一页面上.当我有多页面应用程序时，实现react-router是相当容易的，但这一个真的让我着迷.

import { useRef } from "react";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React from 'react';
import { faBars, faCircleXmark } from '@fortawesome/free-solid-svg-icons';
import "./Navbar.css";
import {Link} from 'react-scroll';

function Navbar() {
    const navRef = useRef();

    const showNavbar = () => {
        navRef.current.classList.toggle(
            "responsive_nav"
        );
    };

    return (
        <header>
            <nav ref={navRef}>  
                <Link to="home" spy={true} smooth={true} offset={-100} duration={500}>Home</Link>
                <Link to="about" spy={true} smooth={true} offset={-100} duration={500}>About me</Link>
                <Link to="mywork" spy={true} smooth={true} offset={-100} duration={500}>My Work</Link>
                <Link to="contact" spy={true} smooth={true} offset={-150} duration={500}>Contact</Link>
                <button
                    className="nav-btn nav-close-btn"
                    onClick={showNavbar}>
                    <FontAwesomeIcon icon={faCircleXmark} style={{color: "#FFB30D",}} />
                </button>
            </nav>
            <button
                className="nav-btn nav-open"
                onClick={showNavbar}>
                <FontAwesomeIcon icon={faBars} style={{color: "#FFB30D",}}/>
            </button>
        </header>
    );
}

export default Navbar;

import './App.css'
import React from 'react';
import Navbar from "./Components/Navbar.jsx";
import Home from "./Components/Home.jsx";
import AboutMe from "./Components/AboutMe.jsx";
import MyWork from './Components/MyWork.jsx';
import Footer from './Components/Footer.jsx';
import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <Home />
      <AboutMe />
      <MyWork />
      <Footer />
    </BrowserRouter> 
  );
}

export default App

一旦我点击链接菜单中的链接，它确实滚动到所选的部分，但链接菜单并没有消失.