React / Ioni c: root свойство тега IonNav не работает. Ошибка framework-Delegate-c2e2e1f4. js: 11 Uncaught (в обещании): делегат Framework отсутствует

Question

root свойство тега IonNav не работает. он получает стек при ошибке в обещании (отсутствует делегат фреймворка), и я хочу использовать IonNav. Я знаю альтернативный метод (т. Е. Route), но все же я хочу, чтобы IonNav использовался в моем проекте.

import React,{useState} from 'react';
import { RouteComponentProps } from 'react-router';
import { } from '@ionic/core';
import firebase from 'firebase';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar,IonButtons ,IonBackButton,
IonList,IonListHeader,IonItem,IonLabel,IonIcon,IonAvatar,IonButton,IonToggle,IonNav} from '@ionic/react';
import { sunny,chevronForwardOutline,moon,notifications,personAdd,logOutOutline,language} from 'ionicons/icons';
import './Settings.css';

interface componentProps {
  state: any;
}

const Settings: React.FC<componentProps> = ({state}) => {
  return (
    <IonPage>
      <IonNav root={NavDetail}>
      </IonNav>
    </IonPage>
  );
};


const NavHome = (state: any) => {
  let detail = state.state; 
  const [checked, setChecked] = useState(false);
  const showDetail = () => {
    console.log('actrive')
  }

  return (
      <React.Fragment>
        <IonContent>
          <IonHeader>
            <IonToolbar>
            <IonButtons slot="start">
              <IonBackButton defaultHref="Dashboard" />
            </IonButtons>
              <IonTitle>Settings</IonTitle>
            </IonToolbar>
          </IonHeader>
          <IonToolbar>
            <IonList>
                <IonItem>
                  <IonAvatar slot="start">
                    <img src={detail.user.photo} />
                  </IonAvatar>
                  <IonLabel>
                    <h1>{detail.user.name}</h1>
                    <p>Edit personal details</p>
                  </IonLabel>
                  <IonButton slot="end" size="large" fill="clear" onClick={showDetail}>
                    <IonIcon icon={chevronForwardOutline} />
                  </IonButton>
                </IonItem> 
                <IonItem>
                  <IonAvatar slot="start" className="dark"  >
                    <IonIcon size="large" icon={moon} style={{color:'white',margin:'10% 0px 0px 10%  '}}/>
                  </IonAvatar>
                  <IonLabel>
                    <b>Dark Mode</b>
                  </IonLabel>
                  <IonButton slot="end"  size="large" fill="clear">
                    <IonToggle checked={checked} onIonChange={e => setChecked(e.detail.checked)} color="success" />
                  </IonButton>
                </IonItem> 

                <IonListHeader><h5>Notification</h5></IonListHeader>
                <IonItem>
                  <IonAvatar slot="start" className="notification"  >
                    <IonIcon size="large" icon={notifications} style={{color:'white',margin:'10% 0px 0px 10%  '}}/>
                  </IonAvatar>
                  <IonLabel>
                    <b>Notification</b>
                  </IonLabel>
                  <IonButton slot="end"  size="large" fill="clear">
                    <IonToggle checked={checked} onIonChange={e => setChecked(e.detail.checked)} color="success" />
                  </IonButton>
                </IonItem> 
                <IonListHeader><h5>Region</h5></IonListHeader>
                <IonItem>
                  <IonAvatar slot="start" className="language"  >
                    <IonIcon size="large" icon={language} style={{color:'white',margin:'10% 0px 0px 10%  '}}/>
                  </IonAvatar>
                  <IonLabel>
                    <b>Language</b>
                  </IonLabel>
                  <IonButton slot="end" href="/Settings" size="large" fill="clear">
                    <IonIcon icon={chevronForwardOutline} />
                  </IonButton> 
                </IonItem> 
                <IonItem>
                  <IonAvatar slot="start" className="logout"  >
                    <IonIcon size="large" icon={logOutOutline} style={{color:'white',margin:'10% 0px 0px 10%  '}}/>
                  </IonAvatar>
                  <IonLabel>
                    <b>LogOut</b>
                  </IonLabel>
                  <IonButton slot="end" href="/Settings" size="large" fill="clear" onClick={()=>{
                    firebase.auth().signOut();
                    window.location.href="/Login";
                  }}>
                    <IonIcon icon={chevronForwardOutline} />
                  </IonButton> 
                </IonItem> 
                <IonListHeader><h6  style={{margin:'0 auto'}}>App Ver 1.0.0</h6></IonListHeader> 
            </IonList>
          </IonToolbar>
        </IonContent>
      </React.Fragment>
  )
};
const NavDetail = () => {
  console.log('bind');
  return(
    <React.Fragment>
      <IonHeader translucent>
          <IonToolbar>
              <IonButton slot="start">Back</IonButton>
              <IonTitle>Test</IonTitle>
          </IonToolbar>
      </IonHeader>
      <IonContent fullscreen class="ion-padding">
          <p>Hi</p>
      </IonContent>
  </React.Fragment>
  );
  }



export default Settings;