react-router-dom Link 不导航到目标页面的开头

Question

我在主页上使用 react-router-dom Link 来导航到一些路线。当我位于主页顶部时，它可以正常工作。但是当我向下滚动主页并单击导航栏中的 Link 项目时，虽然它导航到指定的路线，但目标页面并没有从顶部显示。它从页面中间的某处开始。

这是我的导航栏：

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;

有什么建议吗？

谢谢

Answer 1

我通常使用类似的方法来确保我的页面在访问时从顶部显示。

 React.useLayoutEffect(() => {
  window.scrollTo(0, 0);
}, [])

我使用 useLayoutEffect 挂钩在浏览器开始绘制之前应用 window 滚动。

您可以阅读更多相关信息here

react-router-dom Link 不导航到目标页面的开头

react-router-dom Link does not navigate to the start of target pages

navigation

hyperlink

reactjs

react-router-dom