Noté que cada vez que accedo a una ruta, la página se desplaza automáticamente hacia abajo cuando uso <Link> , estoy un poco confundido porque está funcionando y obtengo la página, pero se desplaza automáticamente hasta el final por esto comportamiento.
Aquí está el enrutador:
import {Link,Routes,Route,Navigate} from 'react-router' const App = () => { const user=true return <div> <Routes> <Route exact path='/' element={<Home/>} /> <Route exact path="/products/:category" element={ <ShoppingCat/>}/> <Route exact path="/product/:id" element={ <ProductView/>}/> <Route exact path="/cart" element={ <Cart/>}/> <Route exact path="/login" element={user?<Navigate to='/'/>: <Login/>}/> <Route exact path="/register" element={ user? <Navigate to='/'/> :<Register/>}/> </Routes> este es un botón para acceder a la ruta <ProductView/> :
<Link to={`/product/${product._id}`}> <button className='btn-4'>View </button> </Link>Sin ver más código, supongo que la ubicación de su botón se encuentra en la parte inferior de la página, por lo que cuando cambia de ruta, permanece en la parte inferior ya que no tiene un componente de desplazamiento hacia la parte superior.
Para desplazarse hasta la parte superior en cada cambio de ruta, haga lo siguiente.
Nuevo componente ScrollToTop.js
import { useEffect } from 'react'; import { withRouter } from 'react-router-dom'; function ScrollToTop({ history }) { useEffect(() => { const unlisten = history.listen(() => { window.scrollTo(0, 0); }); return () => { unlisten(); } }, []); return (null); } export default withRouter(ScrollToTop);Luego cambia tu app.js a esto
import {Link,Routes,Route,Navigate} from 'react-router' const App = () => { const user=true return <div> <ScrollToTop /> <Routes> <Route exact path='/' element={<Home/>} /> <Route exact path="/products/:category" element={ <ShoppingCat/>}/> <Route exact path="/product/:id" element={ <ProductView/>}/> <Route exact path="/cart" element={ <Cart/>}/> <Route exact path="/login" element={user?<Navigate to='/'/>: <Login/>}/> <Route exact path="/register" element={ user? <Navigate to='/'/> :<Register/>}/> </Routes> </div>Si bien la respuesta anterior es buena para versiones anteriores, withRouter y el historial ya no existen en V6, así es como se ve el desplazamiento hacia el envoltorio superior en la versión posterior:
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; }y en index.js:
import ScrollToTop from "./ScrollToTop"; ReactDOM.render( <Router> <ScrollToTop /> <App /> </Router>, document.getElementById("root") );