Error with Params on first load of page on Real Device

Ionic Framework Ionic React
1

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!

2

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
3

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!

4

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

5

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

6

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

7

I hope I’ve done it Ok:

8 
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>
  );
};
9

The label do the trick.

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

10

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?

11

Took me some time to see that you added the <Switch> inside of <IonRouterOutlet> by all accounts thats the fix.

Thanks for the solution though.

13

I have the same issue in my project. I got blank page only in emulator and real device. But it has been years since the conversation here, <Switch> does not seems to be compatible with <IonRouterOutlet>in recent version. What would be the new routing solution instead? @aaronksaunders Thank you in advance.