0

I'm building a mobile app using Ionic (which uses the Angular router). The app has a tab bar along the bottom, which is fairly standard.

Let's say my app structure looks something like this:

  • Home - /tabs/home
  • List of events - /tabs/events/list
    • View event - /tabs/events/view
    • Create event - /tabs/events/create

The event list contains links to the view-event screen which passes the clicked event in. It also has a link to the create-event screen.

My view-event and create-event pages have the following in the header, to take you back to the view-events screen.

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button routerLink="/tabs/events/list" routerDirection="back"></ion-back-button>
        </ion-buttons>

On the homepage, I'd like to put a link to the Create Event page. If I add in <ion-button routerLink="/tabs/events/create">Create Event</ion-button> it changes the tab to the Events tab and shows me that page, but there's no Back button to return to the main Events List screen.

I've tried changing <ion-back-button to just <ion-button without any joy either.

Joe
  • 15,669
  • 4
  • 48
  • 83
  • Not sure will it work or not but try `Location`. Check https://stackoverflow.com/a/36470719/5909026 – Najam Us Saqib Feb 03 '21 at 15:22
  • Do you test in browser or mobile? – Sergey Mell Feb 05 '21 at 16:22
  • @SergeyMell both; where possible I test in browser with `ionic serve` as it's much faster, then go to `ionic cap run ios -l --external` to test on the device before pushing the code, or if any plugins are required – Joe Feb 05 '21 at 16:45
  • And the behavior of the back button is the same on web and mobile devices? – Sergey Mell Feb 05 '21 at 16:46
  • @SergeyMell yes. Looking at `defaultHref` as you mentioned in your deleted answer, that looks like it may do the trick. Do you know what the difference between that and `routerLink` is? – Joe Feb 05 '21 at 17:29
  • Yeah, that was smth I was thinking of, but it seems that the behavior is not correct. I'll do some more research a bit later today and maybe provide some more correct answer – Sergey Mell Feb 05 '21 at 17:31

1 Answers1

0

I've researched your question a little bit. In a general situation, ion-back-button won't be rendered if no history is available in your navigation stack.

However ion-back-button in conjunction with ion tabs works incorrectly. Here you can find the explanation of this problem which is confirmed by multiple issues: Issue 1, Issue 2 etc.

The first solution that could be used is an enhanced ion-button package. I didn't give it a try, but developers mention it in issues like a possible solution

An alternative way is to use defaultHref property which allows you to navigate back to the defined URL even if there is no history. This looks like a crutch in general way however may work in some simple cases when the back button URL is unambiguously predefined. See more about it here: https://ionicframework.com/docs/api/back-button#properties

Sergey Mell
  • 7,780
  • 1
  • 26
  • 50
  • Cheers for the explanation, as well as potential workarounds. Much appreciated, have a great day! – Joe Feb 08 '21 at 15:26