Breaking News: Grepper is joining You.com. Read the official announcement!

react scroll to top when route change

Pierre Guerineau answered on April 18, 2021 Popularity 9/10 Helpfulness 6/10

answer react scroll to top when route change

related scoll to top on each route react

react scroll to top when route change

Comment

import { Link } from "react-router-dom";
import { useState, useEffect } from "react";

const Header = () => {
  const [navClick, setNavClick] = useState();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [navClick]);

  return (
    <nav>
      <div>
        <Link to="/" onClick={() => setNavClick(!navClick)}>
          Home
        </Link>
      </div>
    </nav>
  );
};

export default Header;

Popularity 9/10 Helpfulness 6/10 Language javascript

Source: Grepper

Tags: javascript react-scroll when

Link to this answer
Share Copy Link

Contributed on Jan 14 2023

Pierre Guerineau

0 Answers Avg Quality 2/10

Closely Related Answers

scoll to top on each route react

Comment

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}


function App() {
  return (
    <Router>
      <ScrollToTop />
      <App />
    </Router>
  );
}

Popularity 10/10 Helpfulness 10/10 Language javascript

Source: stackoverflow.com

Tags: each

Link to this answer
Share Copy Link