IonReactRouter не отображает IonPage

Question

Я новичок в структуре ionic-react, и пока мне она нравится. но теперь я столкнулся с проблемой. когда я использую "IonReactRouter", он говорит, что моя страница должна находиться внутри компонента IonPage, несмотря на то, что это так. Я попытался удалить составной div, но все равно ничего. любая помощь приветствуется...

Answer 1

Я столкнулся с той же проблемой, но смог решить ее следующим образом.

Согласно журналу изменений 4.9.0-rc2, IonPage должен быть корневой страницей для Ionic Pages. Кроме того, IonRouterOutlet должен быть прямым родительским компонентом каждой IonPage, как это объясняется в этом комментарии. Простой пример может выглядеть так.

const Home: React.FC = () =>
    <IonPage>
        <IonHeader>Home</IonHeader>
    </IonPage>

const Example: React.FC = () =>
    <IonPage>
        <IonHeader>Example</IonHeader>
    </IonPage>


const App: React.FC = () =>
    (
        <IonApp>
            <IonReactRouter>
                <IonRouterOutlet>
                    <Route path="/"        component={Home}   />
                    <Route path="/example" component={Example}/>
                </IonRouterOutlet>
            </IonReactRouter>
        </IonApp>
    );
export default App;

Но обратите внимание, если вы используете вложенные маршруты, как показано в руководстве по реакции-маршрутизатору, div нарушит прямое условие родитель-потомок. Приложение перейдет к компоненту, инициализирует его, но отобразит только пустую страницу.

Поэтому обязательно всегда используйте IonRouterOutlet.

const Home: React.FC = () =>
    <IonPage>
        <IonHeader>Home</IonHeader>
        <IonContent>
            <Link to={'/example/simple'}>Simple</Link>
            <br/>
            <Link to={'/example/advanced'}>Advanced</Link>
        </IonContent>
    </IonPage>

const Example: React.FC<RouteComponentProps> = (route: RouteComponentProps) =>
    <IonRouterOutlet> 
        <Route path={`${route.match.url}/simple`} component={SimpleExample}/>
        <Route path={`${route.match.url}/advanced`} component={AdvancedExample}/>
    </IonRouterOutlet>

const SimpleExample: React.FC<RouteComponentProps> = (route: RouteComponentProps) =>
    <IonPage>
        <IonHeader>Simple</IonHeader>
    </IonPage>

const AdvancedExample: React.FC<RouteComponentProps> = (route: RouteComponentProps) =>
    <IonPage>
        <IonHeader>Advanced</IonHeader>
    </IonPage>