React Onsenui - ons-navigator 的页面堆栈为空（无法 return 到主页）

Question

使用 Onsenui，我无法在推送页面后弹出页面（到 return 到 main/first 页面）。从第一个（已加载）页面开始，如果我推一个，然后另一个，我可以弹出最后一页（带我回到第二页），但不能弹出第二页回到最开始。

调用popPage()之前this.props.navigator.pages的数组长度是2，但是它说栈是空的，不让我return到第一页。

第一页：

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

单击 "nearest" 的按钮会将您带到另一个页面，但值得注意的是不会显示 "pushing" 页面通常显示的动画。

"nearest" (second/onwards) 页面代码：

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 会留下一个错误，提示堆栈为空，即使我的 console.log 语句表明堆栈有两个对象。

如有任何帮助，我们将不胜感激。

Answer 1

我找到了解决方案：

在我的 BottomNav 组件中，我 returned 了一个组件，当你需要 return a 时，堆栈中的第一个元素算作一个页面，（使其不为空）-如果第一个元素是 Tabbar，则不算什么。

Answer 2

换句话说，（AFAICT）您应该始终将页面作为最外层标签的 pushPage() 组件

React Onsenui - ons-navigator 的页面堆栈为空（无法 return 到主页）

React Onsenui - ons-navigator's page stack is empty (can't return to main page)

javascript

reactjs

onsen-ui