onsen react navigator pushpage overwrites last page

Question

In a project, my intention is to use only one Navigator element to handle all page navigation.

There is one singleton appState all over the code, and navigator is member of that, it gets initialized by the outermost App component.

ReactDOM.render(
   <App/>,
   document.getElementById('app')
 );

The navigator is initiated by:

initialRoute = {
  component: LoginPage,
  props: {
}};

and

<Ons.Navigator
  initialRoute={this.initialRoute}
  renderPage={this.renderPage.bind(this)}
/>

and

renderPage(route: Route, navigator: typeof Ons.Navigator) {
  const props: any = route.props || {};
  if (appState.navigator == null) {
    appState.navigator = navigator;
  }
  props.navigator = appState.navigator;
  return React.createElement(route.component, route.props);
}

correctly with initialRoute. When I call pushPage(newRoute), the newRoute is apparently added, when checked at the time of addition. That is, I get the following right after pushing newRoute:

LoginPage
HomePage

However, a subsequent call to pushPage(someOtherRoute) yields

LoginPage
SomeOtherRouteComponent

I would expect

LoginPage
HomePage
SomeOtherRouteComponent

I have verified that there is no issue with synchronization etc, when I push the route object to an aside list, I get everything without any loss. But just pushPage is not working as I expect.

Any ideas, or missing something obvious? The snippets are TS.

score 0 · Accepted Answer · answered Sep 30 '16 at 07:41

It appears that any error during page load is caught by Navigator, and that causes the page to be not added into routes (but the page is still navigated to).

I have filed an issue on github with a workaround. An alternative workaround is to make sure that there are no JS errors during page load, which may not be 100% the case given 3rd party modules are present.

onsen react navigator pushpage overwrites last page

1 Answers1