I need help I'm pretty new to ionic react and I can't figure out what I did wrong in my code when I click one of the IonItem it is supposed to navigate to and render a dynamic page, however, it does not render, it just changes the URL, it logs out a piece of text in the console that I put inside the page component it is supposed to render though.
import { IonActionSheet, useIonToast , IonRouterOutlet, IonButton, IonContent,IonLabel, IonItem, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import { Redirect, Route, withRouter } from 'react-router-dom';
import { IonReactRouter } from '@ionic/react-router'
import AnimalDetail from "./AnimalDetails"
import './Tab1.css';
import { useState } from "react";
const Tab1: React.FC = () => {
const arr = ["Dog", "Cat", "Chicken", "Frog", "Cow", "Goat"]
const [animals] = useState(arr)
const [showActionSheet, setShowActionSheet] = useState(false);
const [present, dismiss] = useIonToast();
const openSheet = () => {
setShowActionSheet(true)
}
const handle = () => {
dismiss()
}
return (
<IonPage>
<IonReactRouter>
<IonRouterOutlet>
<Route exact path="/tab1/:detail">
<AnimalDetail />
</Route>
</IonRouterOutlet>
<IonHeader>
<IonToolbar>
<IonTitle>Animals</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
{animals.map((animal, index) => {
return (
<IonItem routerLink={"/tab1/" + animal} key={index}>
<IonLabel>{animal}</IonLabel>
</IonItem>
)
})}
</IonContent>
{/* <IonRouterOutlet>
<Route path="/tab1/Dog" component={AnimalDetail} />
</IonRouterOutlet>*/}
<IonButton onClick={openSheet}>TriggerSheet</IonButton>
<IonButton
expand="block"
onClick={() =>
present({
buttons: [{ text: 'Close', handler: () => handle() }],
message: 'Toast shown',
onDidDismiss: () => console.log('dismissed'),
onWillDismiss: () => console.log('will dismiss'),
})
}
>
Open Toast
</IonButton>
<IonActionSheet
isOpen={showActionSheet}
onDidDismiss={() => setShowActionSheet(false)}
cssClass='my-custom-class'
buttons={[{text:"Delete"}, {text:"Share"}]}
>
</IonActionSheet>
</IonReactRouter>
</IonPage>
);
};
export default Tab1;