I have created a SPFx webpart which reads parameters from page URL query strings and renders data accordingly.

After the page is loaded and I press back button and again access the page with different parameters, data from old parameters is again rendered. When I refresh the page, the webpart renders correctly based on parameters in URL.

How can I force the webpart to correctly render in the first time without forcing users to exlicitly refresh the page?


I believe this issue is due to the way navigation is handled in SharePoint Modern Pages.

I've had this issue only with Internet Explorer though and in another context, but this is due to the fact the page is not actually reloaded and the Modern React FrameWork uses components in cache if they have already been rendered (only in IE for my case).

What I believe you can do is use the following post about detecting navigation changes in an Application Customizer, and send an event to be received by your webparts. When a webpart listens and receives such an event, they need to re-render or reprocess whatever they did in their componentDidMount()

StackOverflow - Detect Navigation Change in SPFx Application Customizer

GitHub - React RxJs Event Emitter

Don't hesitate if you need more info,

Hope this helps !

  • Thanks Gostron, I'm exploring this option, for now we are working around it by forcing the page to refresh exactly once it's loaded. I'll respond soon after I've tried your solution. – vivek sisodiya May 17 '18 at 14:21
  • Did you ever resolve the problem? I have somewhat the same issue. Maybe you can show how you solved it with page refresh. – TietjeDK Nov 30 '18 at 8:26
  • It works but it is actually not an optimum solution because the user experience is terrible due to page refresh.. What we do is that on page load, we check for a parameter . if it is not found we redirect to same page with the parametre added. When the parameter is found, we proceed to load the page. – vivek sisodiya Dec 16 '18 at 15:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.