test(app, routing): use index

This commit is contained in:
Maria Hutt
2025-06-20 17:41:22 -07:00
parent a926134ba5
commit a65886ba37
4 changed files with 20 additions and 15 deletions

View File

@ -89,9 +89,15 @@ export class ReactRouterViewStack extends ViewStacks {
// Sync child elements with stored viewItems (e.g. to reflect new props)
React.Children.forEach(ionRouterOutlet.props.children, (child: React.ReactElement) => {
const viewItem = viewItems.find((v) => matchComponent(child, v.routeData.childProps.path));
if (viewItem) {
viewItem.reactElement = child;
// Ensure the child is a valid React element sincewe
// might have whitespace strings or other non-element children
if (React.isValidElement(child)) {
const viewItem = viewItems.find((v) =>
matchComponent(child, v.routeData.childProps.path || routeInfo.pathname)
);
if (viewItem) {
viewItem.reactElement = child;
}
}
});

View File

@ -13,6 +13,7 @@ interface MatchPathOptions {
path?: string;
caseSensitive?: boolean;
end?: boolean;
index?: boolean;
};
}

View File

@ -47,7 +47,7 @@ const App: React.FC = () => {
<IonReactRouter>
<IonRouterOutlet>
<Route path="/" element={<Main />} />
<Route path="/routing" element={<Routing />} />
<Route path="/routing/*" element={<Routing />} />
<Route path="/dynamic-routes" element={<DynamicRoutes />} />
<Route path="/multiple-tabs" element={<MultipleTabs />} />
<Route path="/dynamic-tabs" element={<DynamicTabs />} />

View File

@ -20,16 +20,15 @@ const Routing: React.FC<RoutingProps> = () => {
<IonSplitPane contentId="main">
<Menu />
<IonRouterOutlet id="main">
<Route path="/routing/tabs" element={<Tabs />} />
{/* <Route path="/routing/tabs" element={<Tabs />} /> */}
<Route path="/routing" element={<Navigate to="/routing/tabs" replace />} />
<Route path="/routing/favorites" element={<Favorites />} />
{/* <Route path="/routing/favorites" element={<IonRouterOutlet id="favorites"><Route path="/routing/favorites" element={<Favorites />} /></IonRouterOutlet>} /> */}
{/* <Route path="/routing/otherpage" element={<IonRouterOutlet id="otherpage"><Route path="/routing/otherpage" element={<OtherPage />} /></IonRouterOutlet>} /> */}
<Route path="/routing/otherpage" element={<OtherPage />} />
<Route path="/routing/propstest" element={<PropsTest />} />
<Route path="/routing/redirect" element={<Navigate to="/routing/tabs" replace />} />
<Route path="/routing/redirect-routing" element={<RedirectRouting />} />
<Route index element={<Navigate to="/routing/tabs" replace />} />
<Route path="tabs" element={<Tabs />} />
<Route path="favorites" element={<Favorites />} />
<Route path="otherpage" element={<OtherPage />} />
<Route path="propstest" element={<PropsTest />} />
<Route path="redirect" element={<Navigate to="/routing/tabs" replace />} />
<Route path="redirect-routing" element={<RedirectRouting />} />
<Route
path="*"
element={
@ -40,7 +39,6 @@ const Routing: React.FC<RoutingProps> = () => {
</IonPage>
}
/>
{/* <Route element={<Navigate to="/tabs" replace />} /> */}
</IonRouterOutlet>
</IonSplitPane>
);