I am trying to nest routes at different levels of my React component tree but it seems that wrapping lower-level routes with the component causes them not to render (removing IonRouterOutlet fixes the functionality but I get no Ionic animations).
With the code below, clicking the “Page 1” link will update the URL but the page will not actually change. If you change the in Page1Router to a
Page 1 will then show when expected, but there is no animation when clicking the “Page A” link, since the router no longer has the .
Hopefully someone can just tell me I’m making a stupid mistake.
const App: React.FC = () => (
<IonApp>
<IonReactRouter>
<IonRouterOutlet>
<Route path="/" component={HomeRouter} />
</IonRouterOutlet>
</IonReactRouter>
</IonApp>
);
const HomeRouter: React.FC = () => {
return (
<IonRouterOutlet>
<Route path="/" component={Home} exact />
<Route path="/page1" component={Page1Router} />
<Route path="/page2" component={Page2} exact />
</IonRouterOutlet>
);
};
const Home: React.FC = () => {
return (
<IonPage>
<IonContent>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">HOME PAGE</IonTitle>
</IonToolbar>
</IonHeader>
<IonList>
<IonItem routerLink="/page1">
<IonLabel>Page 1</IonLabel>
</IonItem>
<IonItem routerLink="/page2">
<IonLabel>Page 2</IonLabel>
</IonItem>
</IonList>
</IonContent>
</IonPage>
);
};
const Page1Router: React.FC = () => {
return (
<IonRouterOutlet>
<Route path="/page1" component={Page1} exact />
<Route path="/page1/a" component={PageA} exact />
<Route path="/page1/b" component={PageB} exact />
</IonRouterOutlet>
);
};
const Page1: React.FC = () => {
return (
<IonPage>
<IonContent>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Page 1</IonTitle>
</IonToolbar>
</IonHeader>
<IonList>
<IonItem routerLink="/page1/a">
<IonLabel>Page A</IonLabel>
</IonItem>
<IonItem routerLink="/page1/b">
<IonLabel>Page B</IonLabel>
</IonItem>
</IonList>
</IonContent>
</IonPage>
);
};
const Page2: React.FC = () => {
return (
<IonPage>
<IonContent>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Page 2</IonTitle>
</IonToolbar>
</IonHeader>
<h1>Page 2</h1>
</IonContent>
</IonPage>
);
};
const PageA: React.FC = () => {
return (
<IonPage>
<IonContent>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">PAGE A</IonTitle>
</IonToolbar>
</IonHeader>
<h1>Page A</h1>
</IonContent>
</IonPage>
);
};
const PageB: React.FC = () => {
return (
<IonPage>
<IonContent>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">PAGE B</IonTitle>
</IonToolbar>
</IonHeader>
<h1>Page B</h1>
</IonContent>
</IonPage>
);
};
