react-router-dom链接无法导航到目标页面的开始

我正在使用主页上的react-router-dom链接导航到某些路由。当我位于主页顶部时，它可以正常工作。但是，当我向下滚动“主页”并单击导航栏中的“链接”项时，尽管它导航到指定的路线，但目标页面并未从顶部显示。它从页面中间的某处开始。

这是我的导航栏：

import React, { Fragment, useState } from "react";
import { Link } from "react-router-dom";
import Fade from "react-reveal/Fade";

import EduLogo from "./resource/edu.png";
import Logo from "./resource/logo.png";

const Navbar = () => {
const [nav, setNav] = useState(false);

const adjustNav = () => {
  if (window.scrollY >= 1) {
    setNav(true);
    document.getElementById("main-nav").style.height = "100px";
    document.getElementById("nav-logo").style.height = "30px";
    document.getElementById("nav-logo").style.width = "275px";
    document.getElementById("nav-edu").style.height = "65px";
    document.getElementById("nav-edu").style.width = "200px";
  } else {
    setNav(false);
    document.getElementById("main-nav").style.height = "120px";
    document.getElementById("nav-logo").style.height = "37px";
    document.getElementById("nav-logo").style.width = "360px";
    document.getElementById("nav-edu").style.height = "80px";
    document.getElementById("nav-edu").style.width = "238px";
  }
};
window.addEventListener("scroll", adjustNav);

return (
 <Fragment>
  <nav id="main-nav" className={nav ? "main-nav active" : "main-nav"}>
    <Fade left>
      <div id="main-nav-logo">
        <a href="#!" target="_blank">
          <img src={EduLogo} alt="" id="nav-edu" />
        </a>

        <img
          src={Logo}
          alt=""
          id="nav-logo"
        />
      </div>
    </Fade>

    <div className="nav-container">
      <Fade bottom cascade>
        <ul>
          <li id="nav-item">
            <Link to="/" className="nav-item">
              Home
            </Link>
          </li>
          <li id="nav-item">
            <Link to="/members" className="nav-item">
              Who We Are?
            </Link>
          </li>
          <li id="nav-item">
            <Link to="/research" className="nav-item">
              What We Do?
            </Link>
          </li>
          <li id="nav-item">
            <Link to="/latest" className="nav-item">
              News & Events
            </Link>
          </li>
        </ul>
      </Fade>
    </div>
  </nav>
</Fragment>
);
};

export default Navbar;

有什么建议吗？

谢谢