使用 IonCards 在 Ionic React 中路由

Question

大家好，女士们，先生们。

我正在使用 Ionic React 构建一个应用程序。我很新，它是为我的 Uni 设计的，我想尝试 Ionic。所以我很感激每一个帮助、信息或提示。

目的地： 我想使用 IonCards，它应该像一个按钮一样工作并路由到详细信息页面。

问题： href 将我发送到一个空白页面，routerLink 打开该页面，但不要删除 IonCards。他们还在那里。

这是我的简单示例：

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>
    )
}

我做错了什么？ 我没有在我的智能手机上尝试过。

首先，感谢您的回答。

编辑（工作结果）：

我实施了Najam Us Saqib 的建议，它奏效了。应该路由的 IonCard 已更改为以下代码（只是尝试实现）：

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>
    )
}

Answer 1

正如您所说，它对您将其发布为答案有用：

试试：Link

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

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