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?