1

I'm using React-Router for navigation in my React web app. I don't know what's wrong with it? when I'm scrolling down and then redirecting to another page, that page also scrolled down automatically. I'm attaching my code and video for reference.

Routes file.

 <Switch>
    <Route path="/" exact>
      <Redirect to="/home"></Redirect>
    </Route>
    <Route path="/home/:brand/:id">
      <ProductDetail />
    </Route>
    <Route path="/home/:brand">
      <ProductList />
    </Route>
    <Route path="/add-item">
      <AddItem />
    </Route>
    <Route path="/home">
      <Home />
    </Route>
  </Switch>

Links.

 <NavLink to="/home/puma">
      <ListItemBrand src={pumaWhite} />
 </NavLink>

enter image description here

Thank you.

Jesswin
  • 231
  • 4
  • 8
  • 3
    This is expected behavior. You will have to write code to scroll to top. Please share your react component code if you have trouble doing that. – Tushar Shahi Oct 17 '21 at 10:54
  • 1
    It's not weird behavior, that's just how it works since ultimately it's the same [page](https://medium.com/@NeotericEU/single-page-application-vs-multiple-page-application-2591588efe58), just different UI components. Check [this](https://stackoverflow.com/questions/36904185/react-router-scroll-to-top-on-every-transition) out for a few solutions. – tomleb Oct 17 '21 at 10:54
  • thank you for the quick replies, but I had one more SPA and used React-Router with that too, but it was behaving as I expected.(loading from top) – Jesswin Oct 17 '21 at 11:00
  • @tomleb3 It works for going forward on the website, but while pressing back, the page shifts either a bit up or a bit down. Any solutions for that? – Jesswin Oct 23 '21 at 18:57

0 Answers0