bug:

[JovanShandro]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:

I am using IonReactRouter and IonRouterOutlet components for routing.
I have declared some private routes and some other routes that cannot be accessed when logged in which I am referring to as Inverse Private routes. The components I use for each of them are described below.

From some inspection using the devtools, I noted that the way the routing was done, was that when I for example entered a private route, the IonPage tag of that component would get a z-index of 101 and the IonPage of all other routes would get a z-index of 100 and a class name ion-page-hidden which added display: none !important.

The problem I am experiencing is that sometimes this class is added to the wrong component and for example for the route '/show' I get the component which is supposed to be shown for route '/settings'. There are even cases when all Components show at once stacked all with z-index 101 and a class named 'can-go-back'.

I found from some other issues that there might be problems when the route components do not have an IonPage component, but all the components I am using for my pages all have the following 'template'

<IonPage>
    <IonHeader> ... </IonHeader>
    <IonContent> ...</IonContent>
</IonPage>

so I don't think this is the case.

Expected behavior:

The right component shows at every route

Steps to reproduce:

My App.tsx looks as follows:

<MyReactContext.Provider value={...}>
   <IonApp>
        <IonReactRouter>
             <IonSplitPane contentId="main">
                 <Menu />
                 <IonRouterOutlet id="main">
                    ...all routes here
                 </IonRouterOutlet>
             </IonSplitPane>
       </IonReactRouter>
   </IonApp>
</MyReactContext.Provider>

Related code:

The components used for the routes are these:

const PrivateRoute: React.FC<Props> = ({
  component: Component,
  render: _render,
  ...rest
}) => {
  const isLoggedIn = useSelector((store: RootState) => store.auth.isLoggedIn);
  return (
    <Route
      {...rest}
      render={props =>
        isLoggedIn ? (
          Component ? (
            <Component {...props} />
          ) : (
            _render(props)
          )
        ) : (
          <Redirect to="/auth/login" />
        )
      }
    />
  );
};

For what I described as Inverse Private routes I use the same thing but only when not logged in (I will merge them as one component shortly as they are almost identical)

Other information:

The solution I have implemented on my own as a workaround for the moment is a wrapper component that checks if the location pathname equals the result of match.url and if not I add display: none !important to the IonPage tag of that component.
I don't like it as a solution but it was the only thing that came to my mind.

Ionic info:

Ionic:

   Ionic CLI       : 6.11.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.3.1

Capacitor:

   Capacitor CLI   : 2.4.0
   @capacitor/core : 2.4.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.16.1 (/home/jshandro/.nvm/versions/node/v12.16.1/bin/node)
   npm    : 6.14.2
   OS     : Linux 5.3

Thank You!

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

For a guide on how to create a good reproduction, see our Contributing Guide.

[JovanShandro]

Hi. I managed to create a small reproduction. You can find it here:
https://github.com/JovanShandro/Example

The steps would be:

• Run yarn start
• Type a@a.com for email and just 'a' for password. You will be taken to the show screen.
• Then open the menu and go once the the second then to the third screen.
• Then press the sign out button on the menu.
• Login again and the screen that shows won't be the show screen.

[JovanShandro]

Anything new on this?

[liamdebeasi]

Thanks, I was able to reproduce the issue. As suggested, this looks like an issue when using PrivateRoute (using Route worked fine for me).

[JovanShandro]

@liamdebeasi Thank you for the reply!
Something else I have noticed, If I use BrowserRouter and Switch instead of IonReactRouter and IonRouterOutlet it works fine, which made me think probably these components were the ones causing the error.

[alexmbp]

I found from some other issues that there might be problems when the route components do not have an IonPage component

I faced similar issues. Some of my routes were rendering containers / controllers that are just FC that using hooks to combine some logic and render UI page (which has IonPage), e.g.

const PageController = () => {
   const [state, setState] = useState('');
   return <PageView state={state} setState={setState} />
}

I had issues with a transitions and with router params, so I needed to make it like that:

const PageController = () => {
   const [state, setState] = useState('');
   return <IonPage>
       <IonContent>
            <PageView state={state} setState={setState} />
       <IonContent />
   <IonPage />
}

Besides that right now I'm struggling with getting params from the router, I have url like that:

<Route
            path="/sub-route/:someParam/page"
            render={(props) => {
              // TODO: define why someParam is not available
              return <PageController transactionId={props.match.params.someParam} />;
            }}
            exact
/>

So, when I'm opening the route pushing it from other places - params are empty. But, if I just reload the page - param for the totally same URL are available.

Issue goes when I use Switch.

@JovanShandro I found that issue goes even if you just replace IonRouterOutlet with Switch. IonReactRouter/BrowserRouter does not really matters.

[wmadden]

Something the Ionic team do a poor job of documenting is that the <IonRouterOutlet> does not function the same way as React Router's <Switch>: it will render all Route components whose path matches, rather than just the first one.

@JovanShandro your example is not accessible so I couldn't see if this is relevant but it caused me a lot of headaches recently so maybe it'll help

[uncvrd]

Did anyone end up developing an example with PrivateRoutes that works correctly within Ionic's router? I've been struggling with this for months trying to get something to work...lots of routing bugs when using private routes / authentication and tabs.

#23521