bug:

# 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'
```jsx

...
...

```
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:

```jsx

...all routes here

```

**Related code:**

The components used for the routes are these:
```jsx
const PrivateRoute: React.FC = ({
component: Component,
render: _render,
...rest
}) => {
const isLoggedIn = useSelector((store: RootState) => store.auth.isLoggedIn);
return (

isLoggedIn ? (
Component ? (

) : (
_render(props)
)
) : (

)
}
/>
);
};
```
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!