我在使用React + Ionic对某些页面执行导航时遇到问题。我要访问的其中一个页面具有：“IonBackButton”（无文本）。但当我访问此页面时，我收到以下错误：

当我删除IonBackButton所在的行时，错误消失了。
如果我在Foo页面上运行“router.goBack（）”，它可以正常工作（即不丢失历史记录）
我尝试了2种类型的导航页面是，你会看到在下面的代码，但结果是一样的：
脚注列表：

const FooList: React.FC<RouteComponentProps> = ({ match }) => {
  const router = useIonRouter();
  const history = useHistory();
  const goToFoo = () => {
    router.push(`${match.url}/foo`, 'forward', 'push');
  };

  return (
    <IonGrid>
      <IonButton
        onClick={(e) => {
          e.preventDefault();
          history.push(`${match.url}/foo`);
        }}
      >
        Go to Foo 1
      </IonButton>
      <IonButton
        onClick={goToFoo}
      >
        Go to Foo 2
      </IonButton>
    </IonGrid>
  );
};

export default FooList;

FooPage（我希望IonBackButton出现在何处）：

const Foo: React.FC<any> = () => {
  const router = useIonRouter();

  if (router.canGoBack()) {
    console.log("canBack")
  }

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Foo</IonTitle>
          <IonButtons slot="start">
            <IonBackButton text="" icon="buttonIcon" />
          </IonButtons>
        </IonToolbar>
      </IonHeader>
    </IonPage>
  );
};

export default Foo;

型
先谢谢大家。