Ion-back-button not showing and not working

Hello, All, I am facing an unknown issue in ionic5/capacitor/angular project.
it’s just that component doesn’t show if defaultHref is empty.
can anyone help me?

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button mode="ios" text="">
      </ion-back-button>
    </ion-buttons>
    <ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>

this is my code.
image

1 Like

The back button will only show if there is a page to go back to. So if you go from /home to /page2, the back button will show up on /page2 because you have /home to go back to.

On the other hand, if you land on /page2 directly by typing it into the URL bar, the back button will not show because there is no page to back to.

Using defaultHref is a way of having a fallback page in the event that users land on /page2 directly.

Thanks @ldebeasi
yeah, you are right, the back button is showing in /page2 if I go from /home to /page2,
but I got another problem.
It’s just that I cannot go to /home if I tap the back button on /page2.
image

This ones work for me, but make sure you should add back button after the navigate one page.

Screenshot 2021-10-01 at 08.45.10

I also tried like this. but not worked.

can you show me your page navigation ?

Do you have an example app I can try? Hard to say what the issue is without being able to reproduce it myself.

https://github.com/devmanateam/ionic-back-button-test.git

this is the test github,

1 Like

In tab1.page.scss you are forcing ion-back-button to show, even when it should not show. This is going to result in a non-functional back button on certain pages.

When navigating from /home to /tabs/tab1 the ion-back-button should not show on the Tab 1 page. The reason for this is you are entering a nested routing outlet context when you go into the tabs. The back button should only ever account for the context you are working in. If you remove the CSS that forces the ion-back-button to show, everything is working as intended.

To explain this a bit further: Each tab is its own navigation stack, which is why the back button is not showing here. A good example of this behavior can be found in the native iOS App Store app. If you go to the “Games” tab from “Today”, notice that there is no back button on the “Games” tab that brings you back to “Today”. If you were to tap on an app in the “Games” tab, notice that a back button appears to bring you back to the root “Games” tab.

Each tab is its own individual stack that does not interact with other stacks. From the sample app you provided, it looks like you are trying to get a more linear-style navigation. In that case, tabs is probably not the correct UI to use here as tabs are non-linear in nature (meaning you can jump around from tab to tab and navigate to child pages within certain tabs).

1 Like

Thanks for your reply, However, let’s assume that the home page is root, which will show some categories on the home page.
and When End-user taps any category, then need to move tab page(the content on tab page should be differenced according to tapped category.)
in this case, the tab page needs to back home page in order to choose another category.
How can I back to Home page in the tab page?

Can you share your email?
I will send you an invitation in Testflight so that you can check my app on your iphone.

I’m sure @ldebeasi will provide better support here than I can, but dear future readers of this thread:

Whenever I have a UI that involves tabs, and I’m finding that things aren’t running completely smoothly, in exactly the way I wish it would, the very first thing I do is to take a very hard look at whether tabs are really the best fit for the situation. I can’t remember a time that it turned out to be.

Tabs are a tricky interface. They seem attractive to developers, especially on mobile devices where screen real estate is a precious commodity, because they effectively give you a “Z axis” to layer a bunch of stuff into the same space. However, “out of sight, out of mind” is a real thing. Action-at-a-distance that affects the contents of tab B from within tab C (or from a launch page) is disorienting for users.

The navigation scenario @ldebeasi is describing in the App Store app may seem very specific and limited. It is. It’s also pretty much the only type of navigation scenario that is well-adapted to a tabbed presentation. Ionic’s tab component is opinionated in this respect, and I think that’s a very good thing, as it guides us developers away from potential shipwrecks.

2 Likes

In this case if you want the back button to always go back to /home when there is no previous page, you should use the defaultHref property:

<ion-back-button defaultHref="/home"></ion-back-button>
4 Likes

solved the problem, I added defaultHref.
Thanks.

2 Likes