¿Cómo hacer que su página se desplace hacia arriba cuando cambia la ruta?

Supongamos que hacemos clic en el botón Acerca de nosotros, se nos dirige a una página diferente, pero no se carga desde la parte superior. Tenemos que desplazarnos nosotros mismos hacia arriba para ver el contenido desde el principio. Nuestra nueva página se carga desde la altura en la que estaba nuestro botón Acerca de nosotros (de la página anterior).

Esto sucede porque react-router-dom solo sabe cambiar la ruta. No puede cargar la página desde una posición diferente. Entonces, tenemos que hacer un componente funcional diferente para cargar nuestra página desde la parte superior cuando cambiamos la ruta.

Requisito previo:

• Conocimientos básicos de npm y comando create-react-app.
• Conocimientos básicos de componentes con estilo.
• Conocimientos básicos de ganchos useEffect React.
• Conocimientos básicos de react-router-dom.

Configuración básica: Comenzará un nuevo proyecto usando el comando create-react-app como se muestra a continuación.

npx create-react-app react-router-scroll

Ahora vaya a su carpeta react-router-scroll escribiendo el comando dado en la terminal.

cd react-router-scroll

Módulo requerido: Instale las dependencias requeridas en este proyecto escribiendo el comando dado en la terminal.

npm install react-router-dom
npm install --save styled-components

Ahora cree la carpeta de componentes en la carpeta src , luego vaya a la carpeta de componentes y cree cuatro archivos Home.js, About.js, Styling.js, GoToTop.js .

Estructura del proyecto: La estructura de archivos en el proyecto se verá así.

Ejemplo: en este ejemplo, diseñaremos un componente funcional que cargue la página de nuestro enrutador desde la parte superior, para eso necesitaremos manipular el archivo App.js y otros archivos de componentes creados.

import React from 'react'
import GoToTop from './GoToTop'
import { Header, Button, Content, RouterLink } from "./Styling"; 
const Home = () => {
    return (
        <div>
        <Header>GeeksForGeeks Homepage</Header> 
        <Content></Content>
        <RouterLink to='/about'>
        <Button>About Us</Button>
        </RouterLink>
        <Content></Content>
        <GoToTop />
        </div>
    )
}
  
export default Home

import React from 'react'
import GoToTop from './GoToTop';
import { Header, Button, Content, RouterLink } from "./Styling"; 
const About = () => {
    return (
        <div>
        <Header>GeeksForGeeks About Us</Header> 
        <Content></Content>
        <RouterLink to='/'>
        <Button>Return to Homepage</Button>
        </RouterLink>
        <Content></Content>
        <GoToTop />
        </div>
    )
}
  
export default About

import { Link } from 'react-router-dom';
import styled from 'styled-components'; 
    
export const Header = styled.h1` 
   margin: 0; 
   padding: 0; 
   text-align: center; 
   color: green; 
`; 
  
export const Content = styled.div`
   overflowY: scroll; 
   height: 700px;
`;
  
export const RouterLink = styled(Link)`
   cursor: pointer; 
   transition: all 0.2s ease-in-out; 
   text-decoration: none; 
`;
  
export const Button = styled.button` 
  padding: 20px; 
  font-size: 20px; 
  position: relative; 
  left: 42%; 
  margin: 20px; 
  cursor: pointer;
`; 

import { useEffect } from "react";
import { useLocation } from "react-router-dom";
  
export default function GoToTop() {
  const routePath = useLocation();
  const onTop = () => {
    window.scrollTo(0, 0);
  }
  useEffect(() => {
    onTop()
  }, [routePath]);
  
  return null;
}

Explicación: inicializamos una variable con el nombre routePath y almacenamos el valor de la URL actual en ella, que se devuelve con ganchos useLocation() . 

Ahora se crea una función onTop que carga la página web desde la parte superior cada vez que se llama. Pasamos esta función como el primer parámetro (como una función de devolución de llamada) y nuestra variable routePath como el segundo parámetro (como una dependencia) a nuestros ganchos useEffect . Significa que nuestra función onTop solo se ejecutará si la dependencia routePath ha cambiado entre la representación. 

Cuando hacemos clic en el botón Acerca de nosotros, el valor de routePath cambia (ya que vamos a una nueva URL) y se activa la función onTop que carga nuestra página desde la parte superior.

import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
function App() {
  return (
     <Router>
     <Switch> 
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} /> 
     </Switch> 
     </Router>
  );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida. Podemos observar que la página de la nueva ruta se está cargando desde la parte superior como se muestra a continuación.