CODEWITHSUNDEEP
reactjshyperlinknavigationreact-router-dom
a_arbshhi
a_arbshhi

Reputation: 11

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

I'm using react-router-dom Link on Home page to navigate to some routes. It works correctly when I'm at the top of Home Page. But when I scroll down the Home and click the Link items in navbar, although it navigates to the specified route, the target page is not displayed from the top. It starts somewhere in the middle of the page.

Here's my navbar:

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;

Any suggestion?

Thanks

Upvotes: 0

Views: 504

Answers (1)

Nnaji Victor
Nnaji Victor

Reputation: 105

I normally use something like this to make sure that my page is shown from the top whenever it is visited.

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

I use the useLayoutEffect hook to apply the window scroll before the browser starts painting.

You can read more about it here

Upvotes: 1

Related Questions