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>

                    </div>
            }
        </>

[davorduhovic]

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.

[ibrahimmkara]

ı solved my problem. if not quite right.I can do the things I need to do. I used to use React’s Link library before.I am currently using the a tag from html to link, this tag works as I want