How to pass information on page navigation/routing

Hey guys,
So I have an app and I have set up some cards with data from a loop like so

  if (factCheckerData instanceof Array) {
  factCards = factCheckerData?.map((facts: any) => (
    <IonCard key={facts.id}>
      <IonCardHeader>
        <div className="container"><IonCardSubtitle className="blackText">{facts.title}</IonCardSubtitle>{iconMaker(facts.status)}</div>
        <IonCardSubtitle style={{margin: "3px"}}>#{facts.id}</IonCardSubtitle>
      </IonCardHeader>
    </IonCard>
  ))
  }

Now I want to be able to allow the use to click on a card and it passes the ID of that card to the page, and it will assemble the article by calling the information from my database, I know how to do the DB part Im just a bit lost as to how to pass the ID through to the other page

Take a look at the navigation docs for Ionic React.