Hello, im new to inoic as well as react and java script. I have a lot of knowledge of other languages such as java python and c#. I have a question that is probebly really stupid and simple to answer but im finding it hard to get my head around. I will add my code below. I have a if statements and i want both results use the component however if i do not add a blank one then ionic says that there is no as its needed for tabs. How do i essentially create a class that contains as well as another infomaton and then just beable to use this component instead of having to copy and paste. I hope my code makes it easyer to understrand what im trying to do and i think its proably more of a react or javascript question but thought i would ask here as i might be wrong thank you!
const RoutingComp: React.FC= () => {
return(
//This is what im talkinga bout below -----------------
<IonRouterOutlet>
<Route path="/dashboard" component={Dashboard} exact={true}/>
<Route path="/home" component={Home} exact={true} />
<Route path="/page2" component={Page2} exact={true} />
<Route path="/login" component={Login} exact={true} />
<Route path="/register" component={Register} exact={true} />
<Route exact path="/" render={() => <Redirect to="/login" />} />
</IonRouterOutlet>
)
}
const RoutingSystem: React.FC = () => {
return(
<IonReactRouter>#
{true ?
<IonTabs>
--Have to create a "fake" IonRouterOutlet as it does not recognise routingcomp as a IonRouterOutlet
<IonRouterOutlet>
<RoutingComp/>
</IonRouterOutlet>
<IonTabBar slot="bottom" >
<IonTabButton tab="home" href="/home">
<IonLabel>Liked Properties</IonLabel>
</IonTabButton>
<IonTabButton tab="dashboard" href="/dashboard">
<IonLabel>Find Properties</IonLabel>
</IonTabButton>
<IonTabButton tab="page2" href="/page2">
<IonLabel>Profile</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs> :
<IonRouterOutlet>
<RoutingComp/>
</IonRouterOutlet>
}
</IonReactRouter>
)
}