React Onsenui-ons navigator的页面堆栈为空(无法返回主页)

使用Onsenui,我无法在按下页面后弹出页面(返回主页面/首页)。从第一个(已加载)页面,如果我按下一个页面,然后按下另一个页面,我可以弹出最后一个页面(将我带回第二个页面),但无法弹出第二个页面返回到最开始。

this.props.navigator的数组长度。pages在调用popPage()之前是2页,但它表示堆栈为空,不允许我返回到第一页。

第一页:

import Nearest from './Nearest';    
export default class Dashboard extends Component {  
      pushPage = (component, name) => {
        this.props.navigator.pushPage({ component: component, props: { key: name } });
      }
      renderToolbar = () => {
        return (
          <Toolbar>
            <div className='center'>Your CoffeeSpots Dashboard</div>
          </Toolbar>
        );
      }
      render() {
        return (
          <Page renderToolbar={this.renderToolbar}>
            <div style={{ textAlign: 'center' }}>
              <Button key="nearestButton" onClick={() => this.pushPage(Nearest, "nearest")}>Nearest Coffee Shops</Button>
              <Button key="trendingButton" onClick={() => this.pushPage(Trending, "trending")}>Trending Local Coffee Shops</Button>
            </div>
          </Page>
        );
      }

“最近”(第二页/以后)页面代码:

export default class Nearest extends Component {
  popPage = () => {
    console.log(this.props.navigator.pages.length)
    this.props.navigator.popPage();
  }
  pushPage = () => {
    this.props.navigator.pushPage({ component: Nearest, props: { key: 'nearest2' } });
  }
  renderToolbar = () => {
    return (
      <Toolbar>
        <div className='center'>Nearest Coffee Shops</div>
      </Toolbar>
    );
  }
  render() {
    return (
      <Page renderToolbar={this.renderToolbar}>
        <div style={{ textAlign: 'center' }}>
          <Button onClick={this.popPage}>
            Pop Page
          </Button>
          <Button onClick={this.pushPage}>
            Push Page
          </Button>
        </div>
      </Page>
    );
  }
}

同样,在第二个页面上,单击pop会留下一个错误,即堆栈是空的,即使我的控制台是空的。log语句表示堆栈有两个对象。

任何帮助都将不胜感激。