Ionic React 路由更改 url，页面为空白答案

【问题标题】：Ionic React route changes url, page is blankIonic React 路由更改 url，页面为空白
【发布时间】：2021-01-12 14:44:01
【问题描述】：

我正在使用 Ionic 5 和 React。我有一个名为 ShowListing 的组件，我试图在点击后显示它。如下

export const ShowListing = () => {
    const id = useParams()
    const listings = ShowListingEffect(id)
    return (
        
        <IonPage>
            {listings.map((list: any) => (
                <IonCard key={list.email}>
                <IonCardTitle >{list.title}</IonCardTitle>
                    <IonItem>{list.description}</IonItem>
                    <IonItem>{list.address}</IonItem>
                    <IonItem>{list.phone}</IonItem>
                    <IonItem>{list.pincode}</IonItem>
                    {/* <img src={'http://localhost:5000/' + list.path} /> */}
                </IonCard>
                
            ))}
            </IonPage>
        
    )
}

App组件中已经定义了路由，如下

<IonApp>
    <Router>
        <Switch>
          <Route path='/LandingPage' component={LandingPage} />
          <Route path="/listings/:id" component={ShowListing} exact/>
          <Route path="/" render={() => <Redirect to="/LandingPage" />} exact={true} />
        </Switch>
      </Router>
  </IonApp>

问题是，当我点击链接时，会显示一个空白页面。如果我刷新页面，我会得到组件。我尝试了很多东西

a) 使用 BrowserRouter 代替 IonReactRouter b) 在 IonRouterOutlet 中使用 Switch c) 没有 IonReactRouter 和 IonRouterOutlet

但无济于事。我应该提一下，如果没有 Switch，即使刷新后也不会显示任何内容。任何想法如何解决这个问题？

【问题讨论】：

你如何使用重定向到链接？使用历史或 IonLink
@Cuong 我用 routerLink

标签： javascript reactjs typescript ionic-framework

【解决方案1】：

从 App.tsx 路由到另一个页面，其中也包含路由机制。我在该页面中添加了<Route path="/listings/:id" component={ShowListing} exact/> 行，除了放置开关之外，它还可以正常工作。

【讨论】：