Single page SPFX webpart doesn't refresh when navigate from left navigation in Team site

I have noticed this issue in Targeted production now. But I am worried that this will cause major usability issues if the change is pushed to Production.

I believe this issue is related to a new change for cached pages which improves page load in a SharePoint site.

Problem

The problem appears when you have multiple Single Page app pages with a SPFX webpart and use the left hand navigation menu to switch between the pages. I've noticed that the page doesn't refresh properly. The previous content remains when you switch to a different Single Page App page.

However, it reloaded the entire page when you double click the link in the left navigation. This is not normal UI experience for a web interface and people will think this is not working.

Steps to reproduce

1. Go to a Team site
2. Add a new page and choose 'Apps' tab
3. Click one of the webpart
4. Give a new title and configure the webpart (Make sure you add a quick link)
5. Repeat the step above to create a new App page with a web part
6. On the left navigation page, click the menu to open the app page
7. Click another app page

Result: the page shows the old content. It doesn't refresh the content.

Expected behavior

When you click on a navigation item for an another single page app with a SPFX webpart, The page should be refreshed for the selected page.

Developer environment

• OS: Windows 10
• Framework: Node.js v10
• Browser: Chrome
• Tooling: SPFx v1.10.0, VS Code

Additional context

I've initially raised it in SPFX issues list but it's closed because it is not considered as SPFX related issue.

https://github.com/SharePoint/sp-dev-docs/issues/5211