React Ionic v7.1 - IonRouterOutlet dynamic and static route

Ionic Framework
1

stackoverflow question

How to combine dynamic and static route with the same depth? Ionic with React

Tried:

1:

<IonRouterOutlet>
   <Route path='/:category' render={() => <CategoryPage/>} exact={true} />
   <Route path='/login' render={() => <LoginPage />} exact={true} />
</IonRouterOutlet>

2:

<IonRouterOutlet>
   <Route path='/login' render={() => <LoginPage />} exact={true} />
   <Route path='/:category' render={() => <CategoryPage />} exact={true} />
</IonRouterOutlet>

3:

<IonRouterOutlet>
 <Switch>
   <Route path='/login' render={() => <LoginPage />} exact={true} />
   <Route path='/:category' render={() => <CategoryPage />} exact={true} />
 </Switch>
</IonRouterOutlet>

Only 3: works as expected, but then when changing pages it reloads it, without animation and pre-reserved page

2: Always go to dynamic Route (/:category CategoryPage) (example: /login opens CategoryPage)

1: Works as expected when you load /login (initially). But when you initially load (example: /test-category), you cannot go to /login anymore, it always go to dynamic route /:category (CategoryPage)

I tried to add Regex (negation) /:category(^((?!login).)*$) any tried other, but didn’t find solution with regex

- also tried all combination with and without exact

package.json

"@ionic/pwa-elements": "^3.1.1",
"@ionic/react": "^7.1.0",
"@ionic/react-router": "^7.1.0",

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^5.3.4",
...
2

Can I ask what are you trying to do, so I can better understand how to do it. Thanks