Error with Params on first load of page on Real Device

Hello everyone,

I’m more or less new to this stuff, I’m working on my App for a school project about 2 months ago. Now I’m having a issue with params in URLs, I’ll explain better possible.

I have the issue following links using or using onClick={ () => {history.push (’/groups/xxxx’); }, the issue is that I can’t read parameter with useParams or with RouteComponentProps (match.params.groupid).

Here is my code from Router:

<IonReactRouter>
	<SideMenu />
		<IonRouterOutlet id="main">
			<Route path="/edit-user-profile" exact >
				<EditUserProfile/>	
			</Route>
			<Route path="/messages" exact component={Messages} />
			<Route path="/links" exact component={Links} />
			<Route path="/users" exact component={Users} />
			<Route path="/users/detail/:userid" component={User} />
			<Route path="/groups" exact component={Groups} />
			<Route path="/groups/detail/:groupid" component={Group} />
			<Redirect path="" to="/groups" exact/>
		</IonRouterOutlet>
	</IonReactRouter>

The problem occurs ONLY on real devices (both Android and iOS), in web browser on my MAC it all works well. In the real devices, If I debug it and reload the page it works, but when I follow the link I got blank page.

Here is the code when I’m trying to read the param:

interface GroupIdProps extends RouteComponentProps<{
    groupid: string;
}> {}
const Group: React.FC<GroupIdProps|null> = ({match}) => {

    const groupid = match.params.groupid; // NULL

    .....
}

Sorry for my English and thanks all of you!

For the path /groups/xxxx then the Route should be

<Route path="/groups/:groupid" exact component={Groups} />

IF you really are trying to access the route

<Route path="/groups/detail/:groupid" component={Group} />

Then your code should be

/groups/detail/xxxx

Sorry for my mistake Aaron,

I want to use the path /groups/detail/xxx for a group with id = xxx, and I’m using links like that.

So my route is:

<Route path="/groups/detail/:grouped" component={Group} />

Maybe you need another info to help me, ask what you need Aaron,

thanks a lot!

please fork this project and put the code in so I can get a better understanding of the issue.

My project is Ionic + React, should I create a new one and give access to you? Do you want to see all my code?

just fork the link and add just the component that is not working and the router

I hope I’ve done it Ok:

import React from "react";
import {
  IonApp,
  IonRouterOutlet,
  IonPage,
  IonButtons,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonBackButton,
  IonContent,
  IonItem,
} from "@ionic/react";
import { IonReactRouter } from "@ionic/react-router";
import { Route, Redirect } from "react-router-dom";
import { RouteComponentProps, Switch } from "react-router";

/* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css";

/* Basic CSS for apps built with Ionic */
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";

/* Optional CSS utils that can be commented out */
import "@ionic/react/css/padding.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/flex-utils.css";
import "@ionic/react/css/display.css";

const App: React.FunctionComponent = () => {
  return (
    <IonApp>
      <IonReactRouter>
        <IonRouterOutlet>
          <Switch>
            <Route path="/groups/detail/:groupid" component={GroupDetail} />{" "}
            <Route path="/groups" exact component={Groups} />
            <Redirect from="/" to="/groups" exact />
          </Switch>
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>
  );
};

export default App;

const Groups: React.FC = () => {
  console.log("Rendering GROUPS");

  return (
    <IonPage>
      <IonContent>
        <IonItem
          button
          routerLink={"/groups/detail/aaa"}
          routerDirection="forward"
        >
          Group aaa
        </IonItem>
        <IonItem
          button
          routerLink={"/groups/detail/bbb"}
          routerDirection="forward"
        >
          Group bbb
        </IonItem>
      </IonContent>
    </IonPage>
  );
};

interface GroupDetailProps
  extends RouteComponentProps<{
    groupid: string;
  }>{}
const GroupDetail: React.FC<GroupDetailProps> = ({ match }) => {
  console.log("Rendering GroupDetail " + match?.params?.groupid);

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonBackButton />
          </IonButtons>
          <IonTitle>{"DETAIL PAGE"}</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <h1>Group { match?.params?.groupid}</h1>
      </IonContent>
    </IonPage>
  );
};

The label do the trick.

Thank you so so much Aaron, you’r the best!!

1 Like

hi, this is a bit off-topic, sorry. I have lots of problems at routing because of this restriction:

Since IonRouterOutlet takes over the job in determining which routes get rendered, using a Switch from React Router has no effect when used inside of an IonRouterOutlet . Switches still function as expected when used outside an IonRouterOutlet .

Source: React Navigation: Router Link Redirect to Navigate to Another Page

…but I see that you are successfully using it. so, my question is: is that info I just passed here deprecated and I can finally use Switches in IonRouterOutleds freely and feardlessly?