ionic-framework: bug: Ionic React restores scroll position when navigating forward from /foo/0 to /foo/1
Bug Report
Ionic version: [x] 5.x
Current behavior: when the user wants to go to another news on a news detail page, he reaches the news that he clicked on the news link, but because the user’s location is at the bottom of the page, he has to go up when he wants to see the news
Expected behavior: I think it should go up automatically every time a link is clicked in the backhend
Steps to reproduce:
Related code:
<>
{
newsdetails.length===0? <IonLoading isOpen={newsdetails.length===0} deneme={() => this.getNews} message={“Haber yükleniyor”} duration={5000}/> :
<div>
{newsdetails.map(newdetail =>
<div className="content-detail news-detail" key={newdetail.id}>
<img alt={newdetail.id} className=“imgc boyut image paralax-item”
src={https://d.blabla.com/news/${newdetail.image}.jpg}/>
<div className="middle-container-10">
<div className="button-bar content-nav">
<Link to="#" className="btn btn-light btn-lg"><IonIcon icon={createOutline}></IonIcon>{newdetail.__comment_count} Yorumla</Link>
<Link to="#" className="btn btn-light btn-lg"><IonIcon icon={shareSocial}></IonIcon> Paylaş </Link>
</div>
{newdetail.title}
{newdetail.short_content}
<div className="date">{newdetail.date}</div> <div className=“text-content boyut” dangerouslySetInnerHTML={{__html: newdetail.content}}></div> </div> </div> )} </div> } { categorys.length===0 ? <IonLoading isOpen={categorys.length===0} message={“Haber yükleniyor”} duration={5000}/> : <div> <div className="caption"> <IonIcon icon={documentOutline}/> <span>AYNI KATAGORİDEN HABERLER</span> </div> <div className="news-set-1 news-set-1-2kx1b">-
{categorys.map(category =>
-
<Link to={
/news/${category.id}}> <div className="r2x1 imgc"> <img alt={category.id} className=“image paralax-item” src={https://d.blabla.com/news/${category.image}.jpg}/> </div> <span className="title">{category.title}</span> </Link>
)}
</div>
}
</>
About this issue
- Original URL
- State: open
- Created 4 years ago
- Reactions: 1
- Comments: 16 (5 by maintainers)
This issue is actually quite big. The problem is when navigating between pages with route params, not only that it remembers scroll position but it also remembers page data and everything.
For example: If you have route /category/:id, then you first go on /category/1 page and load some data from api-a asynchronously by code you passed through route params. After that from /category/1 page you want to go to /category/2 page and you will see the same data which you loaded on /category/1 page until your new request is finished. Also, /category/1 ionViewWillLeave and ionViewDidLeave events are not even fired which means the new route is reusing same page component.
You would expect when you navigate to a new page from /category/1 to /category/2 that new page is loaded with fresh state and all the events working as intended, and that new page is added to navigation stack and working with router history for navigating back and front.
You can reproduce the same behaviour on https://ionic-react-conference-app.firebaseapp.com/speakers part if you link from one speaker-detail page to another, let’s say from bear speaker to cheetah speaker (/speakers/speaker/1 -> /speakers/speaker/2). You would see that cheetah image is loaded instead of bear image while you are still at /speakers/speaker/1 route and navigation animation didn’t yet finish. It’s a little bit less noticeable there because data in the conference app is loaded from state and is not async load so you can see it just for a short time.
I think adding some kind of stack navigation like it used to work before in Ionic with push/pop stack would solve a lot of these issues that I saw popping here, a lot of those issues are happening because when you navigate from one route to another with route params it actually reuses the same Page component.
Also I bealive this issue is only happening in @ionic/react version.
Im still having this issue, it is pretty problematic. Are there any news?
For context: On my /foo/:id page, at the bottom i have a list of other /foo/:id links. when i click on one of these links, i seemingly stay right where i was, scrollwise at least, or sometimes it scrolls up just a bit (depending on some contents changing size in the page) and it is not a “fresh” page (some stuff that was initialized on page /foo/1 doesn’t get reinitialized on page /foo/2.
This is really annoying and I don’t even know exactly how to quickly/cleanly fix this while I wait for a library fix. I see this issue is 3 years old, it’s been said above that you guys don’t usually comment on a timeline for bug fixes, so I barely dare to ask… 😕