We have an iframe which we want to display for a specific route. When switching routes back and forth , the iframe is re-rendered and scroll position reset. For example, when user enter text into a form, navigating away to another route then back clears the content and rest the scroll position to the top.
We tracked down the problematic behavior to Auth0 authentication library’s HOC. As soon as we wrapped react-router with this higher order component, switching between routes seemed to force re-rendering.
A working minimal example without HOC can be found here: React Router DOM - JSFiddle - Code Playground
Our actual code is attached below:
- If line 21-28, 33, 37 is enabled, line 32 is commented out, force re-rendering happens
- If line 21-28, 33, 37 is commented out, line 32 is enabled, force re-rendering problem goes away