Es la primera vez que uso React esta semana y estoy tratando de crear una aplicación de búsqueda de Github, todo funciona, excepto el desplazamiento hacia arriba. Cuando me desplazo hacia abajo y hago clic en la vista Repo, quiero que la pantalla se desplace automáticamente hacia arriba, copié el código a través de React Docs y estoy usando React-Router-Dom versión 5, sin embargo, nada se desplaza hacia arriba. Vea a continuación mi código, ¿dónde me equivoco, muchachos?

 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; }

Aplicación.js

 import { BrowserRouter as Router, Switch, Route} from 'react-router-dom'; import './App.css'; import RepoPage from './components/RepoPage'; import ScrollToTop from './components/ScrollToTop'; function App() { return ( <Router> <div className="App"> <h1>Want to see other people's projects? Enter a Github username and Voila!</h1> <ScrollToTop /> <Switch> <Route> <RepoPage /> </Route> </Switch> </div> </Router> ); } export default App;

Fragmento de mi componente Repo.js

 import React, {useEffect, useState} from 'react'; import axios from 'axios'; import RepoDetails from './RepoDetails'; import ScrollToTop from './ScrollToTop'; import '../App.css' function renderRows(repo) { return( <div className='repo-button' onClick={() => getDetails(repo.name)} key={repo.id} > <h3 className='repo-name'> {repo.name} <button onCLick={<ScrollToTop />}>View Repo</button> </h3> </div> ) }