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

react router dom link open link at the top of the page

Tender Turtle answered on December 27, 2023 Popularity 1/10 Helpfulness 1/10

answer react router dom link open link at the top of the page

react router dom link open link at the top of the page

Comment

Below is the solution for react-router-dom v6

1: Create a component ScrollToTop

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

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

  useEffect(() => {
    // "document.documentElement.scrollTo" is the magic for React Router Dom v6
    document.documentElement.scrollTo({
      top: 0,
      left: 0,
      behavior: "instant", // Optional if you want to skip the scrolling animation
    });
  }, [pathname]);

  return null;
}

2: include the above component (i.e. ScrollToTop) inside BrowserRouter

import React from "react";
import { BrowserRouter } from "react-router-dom";
import ScrollToTop from "path/to/ScrollToTop";

export default function App() {
  return (
  	<BrowserRouter>
    	<ScrollToTop />
    	{/* ... Other Components */}
  	</BrowserRouter>
  )
};

source:

https://www.matthewhoelter.com/2022/04/02/how-to-scroll-to-top-on-route-change-with-react-router-dom-v6.html

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: dom javascript react-router

Link to this answer
Share Copy Link