ionic4react-router - IonBackButton不出现。

Question

我正在使用Ionic4开发一个Android的混合型移动react.js应用，同时使用react-router-dom来处理导航。

我已经定义了应用程序的路线，使用 BrowserRouter 和 Route 组件，并且可以使用该组件向前和向后导航就好了。history 属性注入到组件的 props.

这是一个示例应用程序，其中每个路由加载相同的组件，它有一个 IonHeader 与 IonToolbar，而这其中又包含了一个 IonBackButton.

当应用程序打开一个新的页面时，返回按钮在导航栏处短暂可见，然后消失。根据 文件, IonBackButton 是足够聪明的，可以确定什么时候必须可见，所以我不知道发生这种情况是因为Ionic与react.js的整合还在测试阶段，还是因为我做错了什么。

这是我的应用定义。

const App: React.FC = () => (
    <BrowserRouter>
      <IonApp>
        <IonRouterOutlet>
          <Route exact path="/" component={MainPage} />
          <Route exact path="/foo" component={MainPage} />
        </IonRouterOutlet>
      </IonApp>
    </BrowserRouter>
)

这是路由组件 And this is the route component:

const MainPage: React.FC<RouteComponentProps> = props => <>
    <IonHeader>
      <IonToolbar color="primary">
        <IonBackButton goBack={() =>{}} />
      </IonToolbar>
    </IonHeader>
    <IonContent>
      <IonButton onClick={() => props.history.push("/foo")}>Navigate</IonButton>
    </IonContent>
</>

为什么后退按钮在可见后又被隐藏了？我试过为每个路由使用不同的组件，但问题依然存在。

Answer 1

在IonBackButton中使用defaultHref道具。

<IonToolbar>
  <IonButtons slot='start'>
    <IonBackButton defaultHref='/' />
  </IonButtons>
  <IonTitle>Back Button</IonTitle>
</IonToolbar>