scoll to top on each route react

Naval answered on April 18, 2021 Popularity 10/10 Helpfulness 10/10

answer scoll to top on each route react

related react scroll to top when route change

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 javascript

Link to this answer
Share Copy Link

Contributed on Apr 18 2021

Naval

0 Answers Avg Quality 2/10

Closely Related Answers

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 5/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jan 14 2023

Pierre Guerineau

0 Answers Avg Quality 2/10

scoll to top on each route react

Contents

More Related Answers

scoll to top on each route react

Closely Related Answers

react scroll to top when route change

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.