mcku mcku - 2 months ago 21
React JSX Question

onsen react navigator pushpage overwrites last page

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.

Answer

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.

Comments