Ionic/React app params from works in web browser, but the receiving page gets the params as "undefined" in the emulator

In the Ionic/React app, the param passed by page A using component got picked up in page B, but only when running in web browser. In the emulator the param value is “undefined”.

But If I run on a web browser first, then when running the app on emulator, the param value shows up.

The code samples are as below:

In page A:
import { Link} from “react-router-dom”
…

Item Id: ${itemid} ..... In page B: ..... const { itemId } = useParams(); .....

In App.tsx:

........ <PrivateRoute component={}/>

      <Route exact path={"/collection/detail/:itemId"}><PrivateRoute component={<ItemDetail/>}/></Route>
                  ........
                    <FirstPage/>
                
          </IonRouterOutlet>
       </IonSplitPane>
   </IonReactRouter>

Ionic framework should support both web and native code, therefore I am confused. Lots of thanks here for any thought.

1 post - 1 participant

Read full topic