CODEWITHSUNDEEP
angularionic-frameworkionic4
user11625000
user11625000

Reputation:

How will <ion-back-button> work with tabs

Hello i want to put the default back button in all my pages on my Ionic 5 project.

It used to work but when i put navigation through tabs it doesn't show the button or work. If i put a css style it shows the button but doesn't go to previous page.

If i put a defaultHref="/tablinks/home" it goes to the page i put but i want it to go to the previous page and i use it in all my pages. Any help?

 `<ion-buttons slot="start"> <ion-back-button defaultHref="/tablinks/home"></ion-back-button> </ion-buttons>`

Upvotes: 1

Views: 1744

Answers (1)

cpro90
cpro90

Reputation: 168

Using ion-back-button with tabs is working a bit odd of what you would expect.

Lets say you have 3 tabs: TAB LEFT, TAB MIDDLE, TAB RIGHT. If you add ion-back-buttons to all tab instances, you won't have it shown up when you switch between these tabs, because every tab has its own navigation stack.

You visit another route on TAB LEFT, you add it to the stack: The ion-back-button should now show up. If you change now to TAB MIDDLE (that is still on root), te back-button will dissappear because of the TAB MIDDLE naviation stack, that is currently on root.

Go back to TAB LEFT, you are currently on the second view, the back button will show again, if you tap it, it will lead you to the root of TAB LEFT again.

So you have 3 independent stack instances. As you said, defaultHref will cause every back-button go back to a fixed route as root. This is not what anyone would expect.

If you want to use a mixed up navigation, say if you start on TAB LEFT and then tap on TAB MIDDLE and a tap on the back button leads you back to TAB LEFT, you have to do this with an own navigation stack service.

Upvotes: 2

Related Questions