[ ] 4.x
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.
The history.push should result in the Component associated with the Route to be rendered. Without the need for a window.location.reload().
- 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
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)
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