Quantcast
Channel: Ionic Framework - Ionic Forum
Viewing all articles
Browse latest Browse all 49355

How to handle Ionic React Tabs routing with re-used page components across several tabs?

$
0
0

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

Read full topic


Viewing all articles
Browse latest Browse all 49355

Latest Images

Trending Articles



Latest Images

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>