javascript - Ionic React route changes url, page is blank

Question

I am workin with Ionic 5 and React. I have a component called ShowListing that i am trying to display after being clicked upon. It is as follows

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

The route has been defined in App component, as follows

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

The problem is, when i click on the link, a blank page is dispayed. If i refresh the page, i get the component. I have tried a number of things

a) Using BrowserRouter instead of IonReactRouter b) Using Switch inside IonRouterOutlet c) Without IonReactRouter and IonRouterOutlet

But to no avail. I should mention that without Switch, nothing gets displayed, even after refresh. Any ideas how to solve this?

Answer 1

There was another page that was routed to from App.tsx, which contained routing mechanism as well. I put the line <Route path="/listings/:id" component={ShowListing} exact/> in that page and it worked, in addition to putting switch.