Losing navigation view hierarchy on page refresh

ionic-v1
1

I am composing an app with tabs and an ionNavBar with a similar layout to the settings app in iOS. I have tabs that go several levels deep, each level with its own state and associated url. When I refresh the page while inside one of the deeper levels, I lose the navigation hierarchy.

Example

Say I have a tab “animals”.

  • I tap on one of list items, “dogs”. A list of dogs slides into view, I am in the state tabs.animals.dogs and the url is “#/animals/dogs”.
  • I tap on “Corgi”, and the detail view for Corgi slides into view. The state is now tabs.animals.dogs.corgi, and the url is “#/animals/dogs/corgi”. Right now the back button displays and I could tap it to navigate back to “dogs”.
  • I refresh the page, and I am still in the animals tab displaying “Corgi”, but the back button no longer shows to take me back to “dogs”. Further more, if I tap the “animals” tab, the view does not go back to the animals list.

Is this a bug? How do I make the navigation system behave the way I am expecting it to?

2

The navigation is kept in state only so long as the application is running, and refreshing the page clears the state. So its not exactly a bug, but the way it behaves. In a mobile environment, you don’t have a refresh button so this shouldn’t become an issue.

3

That makes sense. Unfortunately, I’m hoping to use this outside a mobile environment as well. Is there a way to ensure the state is set correctly when starting the app from a nested state?

1 Like