bug: Push to new page requires a reload

Bug Report

Ionic version:
[ ] 4.x
[x] 5.x

Current behavior:
We have a button on a page that executes a history.push to another path when clicked. The URL in the browser address bar changes according to the path defined in the history.push command (is OK). However, the Route associated to the new path doesn’t render the Component that is associated with that Route. We need to add a window.location.reload() command after the history.push, to force the component associated with the Route to render. The reload causes flickering in our App.

Expected behavior:
The history.push should result in the Component associated with the Route to be rendered. Without the need for a window.location.reload().

Steps to reproduce:
See https://codesandbox.io/s/ionic-react-useparams-in-grid-possible-fix-g9x7s?file=/src/pages/Home.tsx

  • Click on the “Go to dashboard to view topics” button. The onClick calls a function that: executes a history.push, followed by a window.location.reload. This causes the Topics Overview page to the rendered.
  • If you remove the window.location.reload, the URL in the address bar correctly changes into the correct URL, but the Topics Overview page is not rendered.

When using React without Ionic React, the history.push renders the correct page without the need for a reload. See: https://codesandbox.io/s/react-useparams-in-grid-0e0w8?file=/src/pages/Home.tsx

Related code:

See https://codesandbox.io/s/ionic-react-useparams-in-grid-possible-fix-g9x7s?file=/src/pages/Home.tsx (using Ionic React, the bug occurs)

See https://codesandbox.io/s/react-useparams-in-grid-0e0w8?file=/src/pages/Home.tsx (using plain React, the bug does not occur)

Other information:

Ionic info:


Ionic CLI : 6.12.4 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 5.5.4


Capacitor CLI : 2.2.1
@capacitor/core : 2.4.6


cordova-res (update available: 0.15.3) : 0.15.1
native-run (update available: 1.3.0) : 1.0.0


NodeJS : v14.15.3 (/usr/local/Cellar/node@14/14.15.3/bin/node)
npm : 6.14.9
OS : macOS Big Sur

1 possible answer(s) on “bug: Push to new page requires a reload