温泉反应导航器推送页面覆盖最后一页答案

【问题标题】：onsen react navigator pushpage overwrites last page温泉反应导航器推送页面覆盖最后一页
【发布时间】：2016-09-17 13:12:08
【问题描述】：

在一个项目中，我的意图是只使用一个 Navigator 元素来处理所有页面导航。

代码中有一个单例appState，navigator 是其中的一员，它由最外层的App 组件初始化。

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

导航器由以下人员启动：

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

和

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

和

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);
}

正确使用initialRoute。当我调用pushPage(newRoute) 时，显然添加了 newRoute，在添加时进行了检查。也就是推newRoute后得到以下正确：

LoginPage
HomePage

但是，随后对pushPage(someOtherRoute) 的调用会产生

LoginPage
SomeOtherRouteComponent

我期待

LoginPage
HomePage
SomeOtherRouteComponent

我已经验证同步等没有问题，当我将路由对象推送到备用列表时，我得到了一切而没有任何损失。但只是pushPage 并没有像我预期的那样工作。

有什么想法，还是遗漏了一些明显的东西？ sn-ps 是 TS。

【问题讨论】：

标签： reactjs onsen-ui onsen-ui2

【解决方案1】：

似乎Navigator 捕获了页面加载期间的任何错误，这导致页面未添加到路由中（但页面仍被导航到）。

我已在 github 上提交了issue 并提供了解决方法。另一种解决方法是确保页面加载期间没有 JS 错误，这可能不是 100% 的情况，因为存在 3rd 方模块。

【讨论】：