React router : rendered page scrolls automatically to the bottom-CodePudding

I noticed that when ever I access a route, the page scrolls automatically to the bottom when I use <Link>, I am a bit confused because it is working and I get the page but it scrolls automatically all the way to the bottom by this behavior.

Here is the router:

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>

this is a button to access the <ProductView/> route:

<Link to={`/product/${product._id}`}>
  <button className='btn-4'>View </button>
</Link>

CodePudding user response：

Without seeing anymore code my guess would be that your button location is actually at the bottom of the page so when you change route you are staying at the bottom as you have no scroll to top component.

To scroll to the top on every route change do the following.

New component 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);

Then change your app.js to this

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>