Fix for dynamic routes with app router SSR

This commit is contained in:
Nathan Chapman
2024-03-07 11:36:12 -06:00
parent 83ede65b5e
commit 9d8c110044
18 changed files with 327 additions and 229 deletions
+20 -10
View File
@@ -1,6 +1,12 @@
import { Redirect, Route } from 'react-router-dom';
import { IonRouterOutlet, IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import {
IonRouterOutlet,
IonTabs,
IonTabBar,
IonTabButton,
IonIcon,
IonLabel,
} from '@ionic/react';
import { cog, flash, list } from 'ionicons/icons';
import Home from './Feed';
@@ -12,22 +18,26 @@ const Tabs = () => {
return (
<IonTabs>
<IonRouterOutlet>
<Route path="/tabs/feed" render={() => <Home />} exact={true} />
<Route path="/tabs/lists" render={() => <Lists />} exact={true} />
<Route path="/tabs/lists/:listId" render={() => <ListDetail />} exact={true} />
<Route path="/tabs/settings" render={() => <Settings />} exact={true} />
<Route path="/tabs" render={() => <Redirect to="/tabs/feed" />} exact={true} />
<Route path="/feed" render={() => <Home />} exact={true} />
<Route path="/lists" render={() => <Lists />} exact={true} />
<Route
path="/lists/:listId"
render={() => <ListDetail />}
exact={true}
/>
<Route path="/settings" render={() => <Settings />} exact={true} />
<Route path="" render={() => <Redirect to="/feed" />} exact={true} />
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="tab1" href="/tabs/feed">
<IonTabButton tab="tab1" href="/feed">
<IonIcon icon={flash} />
<IonLabel>Feed</IonLabel>
</IonTabButton>
<IonTabButton tab="tab2" href="/tabs/lists">
<IonTabButton tab="tab2" href="/lists">
<IonIcon icon={list} />
<IonLabel>Lists</IonLabel>
</IonTabButton>
<IonTabButton tab="tab3" href="/tabs/settings">
<IonTabButton tab="tab3" href="/settings">
<IonIcon icon={cog} />
<IonLabel>Settings</IonLabel>
</IonTabButton>