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!
} 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>
              
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?
              
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.