IonReactRouter not rendering IonPage

Question

I am new to the ionic-react framework and so far I am loving it. but now I've come to a problem. when I am using the "IonReactRouter" it says my page must be inside an IonPage component, despite the fact that it is. I've tried removing the compounding div but still nothing. any help is appreciated . . .

Answer 1

I just faced the same problem but could solve it as follows.

According to the Changelog 4.9.0-rc2, an IonPage should be the root page for Ionic Pages. Further, IonRouterOutlet must be the direct parent component of every IonPage, as it is explained in this comment. A simple example could look like this.

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;

But attention, if you use nested routes as shown in the react-router guide the div will break the direct parent-child condition. The app will route to the component, initialize it, but only render a blank page.

Therefore make sure to always use an 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>