Routing in Ionic React with IonCards

Issue

Hey Ladies and Gentlemen.

I am using Ionic React to build an App. I am very new, it`s for my Uni and I wanted to try Ionic. So I am grateful for each help, information or tip.

Destination: I want to use IonCards, which should work like a button and route to the details page.

Problem: href sends me to an empty page and routerLink opens the page, but don't remove the IonCards. They are still there.

Here my simple example:

App.tsx:

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route path="/contracts" component={ContractCard} exact={true} />
        <Route exact path="/" render={() => <Redirect to="/page1" />} />
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

ContractCard.tsx:

const ContractCard : React.FC = () => {
    return(
        <IonPage>
            {contract.map((contract) => {
                return(
                <IonContent>                        
                    <IonRouterOutlet>
                        <Route path='/contracts/contractSite' render={() => <ContractSite/>} exact={true}/>
                    </IonRouterOutlet>
                    <IonCard>
                        <IonItem href='/contracts/contractSite' routerDirection="none">
                            <IonCardHeader>{contract.name}</IonCardHeader>
                            <IonCardContent>
                                    <IonIcon icon={refreshCircle}/>
                            </IonCardContent>
                        </IonItem>
                    </IonCard>
                </IonContent>
                )
            })}
        </IonPage>
     )}

ContractSite.tsx:

const ContractSite : React.FC = () => {
    return (
        <IonPage id="contractSite">
            <IonContent>
                <IonHeader >Hi</IonHeader>
                <IonCard>
                    <IonCardContent>
                        <IonCardHeader>Your Informations</IonCardHeader>
                        <p>Your Name</p>

                    </IonCardContent>
                </IonCard>
                <IonCard>
                    <IonCardContent>
                        <IonCardHeader>Contract Partner</IonCardHeader>
                        <br/>

                    </IonCardContent>
                </IonCard>
                <IonCard>
                    <IonCardContent>
                        <IonCardHeader>Pics and Docs</IonCardHeader>
                    </IonCardContent>
                </IonCard>
            </IonContent>
        </IonPage>
    )
}

What am I doing wrong? I didn't tried it on my smartphone.

Up front, thank you for your answer.

EDIT (Working Result):

I implemented the suggestion of Najam Us Saqib and it worked. The IonCard, which should route, has changed to following code (just try-implementation):

import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom"

const ContractCard : React.FC = () => {
    return(
        <Router>                        
            {contract.map((contract) => {
                return(
                    <IonCard>
                        <Link to='/contracts/contractSite' >
                            <IonCardHeader>{contract.name}</IonCardHeader>
                            <IonCardContent>
                                    <IonIcon icon={refreshCircle}/>
                            </IonCardContent>
                        </Link>
                    </IonCard>
                )
            })}
            <Switch>
                <Route path="/contracts/contractSite">
                    <ContractSite/>
                </Route>
            </Switch>
        </Router>
    )
}

Solution

As you Mentioned it worked for you posting it as answer:

Try: Link

import { BrowserRouter as Router, Route, Link } from "react-router-dom"

<Link to="/link/to/page">
//Your other code
</Link>

Answered By - Najam Us Saqib