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

Reset scroll position in react router 6

Ahmed Shahriar Adnan answered on November 17, 2023 Popularity 5/10 Helpfulness 1/10

answer Reset scroll position in react router 6

related Reset scroll position in react router 6

Reset scroll position in react router 6

Comment

import { MouseEventHandler, ReactNode } from "react";
import { Link } from "react-router-dom";
import { useNavigateToTop } from "./useNavigateToTop";

interface Props {
  children: ReactNode;
  className?: string;
  to: string;
}

/** Link to the top of a page so that the scroll position isn't persisted between pages. Use this instead of React's build-in @see {@link Link}. */
export const LinkToTop = (props: Props) => {
  const navigateToTop = useNavigateToTop();

  const navigateAndReset: MouseEventHandler<HTMLAnchorElement> = (event) => {
    event.preventDefault();
    navigateToTop(props.to);
  };

  return (
    <Link className={props.className} onClick={navigateAndReset} to={props.to}>
      {props.children}
    </Link>
  );
};

Popularity 5/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: javascript react-router reset scroll-position

Link to this answer
Share Copy Link

Contributed on Nov 17 2023

Ahmed Shahriar Adnan

0 Answers Avg Quality 2/10

Closely Related Answers

Reset scroll position in react router 6

Comment

import { useNavigate } from "react-router-dom";

/** Navigate to the top of a page so that the scroll position isn't persisted between pages. Use this instead of React Dom's build-in @see {@link useNavigate}. */
export const useNavigateToTop = () => {
  const navigate = useNavigate();

  const navigateAndReset = (to: string) => {
    navigate(to, { replace: true });
    window.scrollTo(0, 0);
  };

  return navigateAndReset;
};

Popularity 5/10 Helpfulness 5/10 Language javascript

Source: stackoverflow.com

Tags: javascript scroll-position reset react-router r

Link to this answer
Share Copy Link

Contributed on Nov 17 2023

Ahmed Shahriar Adnan

0 Answers Avg Quality 2/10

Reset scroll position in react router 6

Contents

More Related Answers

Reset scroll position in react router 6

Closely Related Answers

Reset scroll position in react router 6

Grepper

Documentation

Social

Legal

Contact

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