0

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;
  • Please provide enough code so others can better understand or reproduce the problem. – Community Apr 22 '22 at 08:52
  • Which route are you testing with the console.log? In any case since the log is displayed, your component is definitely loaded. Could you provide the code to the component you are trying to render? The issue is probably more coming from that component. – Jaro Apr 22 '22 at 08:54
  • looking at the structure of this code, you are heading for a disaster, I suggest you start from a template and follow the recommended patterns because what you have here is wrong – Aaron Saunders Apr 22 '22 at 13:41

1 Answers1

-1

I managed to fix the problem by changing the routerLink attribute in the IonItem to href, and putting the route in the main App.tsx

  • You should be able to use the `routerLink` attribute. The reason it is not working is because you have set up your router wrong. `` needs to be inside `` inside ``, and you shouldn't nest `` unless you absolutely need to. – Patrick Kenny Apr 23 '22 at 14:25