Question

我正在使用 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，即使刷新后也不会显示任何内容。任何想法如何解决这个问题？

Answer 1

还有一个从 App.tsx 路由到的页面，它也包含路由机制。我将 <Route path="/listings/:id" component={ShowListing} exact/> 行放在该页面中，除了放置 switch 之外，它也起作用了。

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

1 个答案: