Hi all, I am using Ionic React Tabs for a music application. I have a quick question on how to handle an IonRouterOutlet
for tabs that share the same page component across tabs. For example, my application has two pages:
- Search Page
- Feed Page
On both the Search
and Feed
pages, I need to allow a user to route to an Artist
page. According to the documentation, I should be making my IonRouterOutlet
look something like the following in my App.tsx
:
<IonRouterOutlet>
<Route path="/:tab(search)" component={Search} exact />
<Route path="/:tab(search)/artist/:artistId" component={Artist} exact />
<Route path="/:tab(feed)" component={Feed} exact />
<Route path="/:tab(feed)/artist/:artistId" component={Artist} exact />
</IonRouterOutlet>
This is manageable so far, but now on each Artist
page, a user can click an Album
so I’d have to add another Route
for both the Search
and Feed
tabs to account for the ability to route to /(whatever-tab)/album/:albumId
. This is getting quickly out of hand because I have several shared components that are used amongst several tabs (4 tabs in my actual app). Is there a better way to handle this?
As mentioned in the docs, path
simply uses regex to match the url. Is there a way to do something like:
<IonRouterOutlet>
<Route path="/:tab(search)" component={Search} exact />
<Route path="/:tab(feed)" component={Feed} exact />
<!-- updated the following line --->
<Route path="/:tab(search || feed)/artist/:artistId" component={Artist} exact />
</IonRouterOutlet>
So it can match several tabs based on what I pass as the current tab from the match
props to my routerLink
?
What’s the best practice here? The example tabs app doesn’t even use this :tab()
syntax…is this out of date now? Thanks!
1 post - 1 participant