Is it possible to catch navigation event inside Sharepoint Framework web part?

I know this is possible in application customizer using context.placeholderProvider.changedEvent, but I cannot find anything similar for web parts.

I use ReactJS and I tried componentWillUnmount, but it's not invoked.

window.onbeforeunload, window.onhashchange - don't work either, probably because modern SharePoint pages are not reloaded entirely when navigating through pages.

4 Answers 4


Try using context.placeholderProvider.navigatedEvent instead

This has been suggested as the way going forward. Unfortunately the documentation hasn't been updated to reflect this.

  • 1
    I assume placeholderProvider exists in extensions context only, not in webparts
    – Palina
    Jul 16, 2018 at 11:07

I put this in my webpart render method:

 this.reactElement = React.createElement(TrForm, formProps);
      var formComponent: TrForm = ReactDom.render(this.reactElement, this.domElement) as TrForm;//render the component
      window.onbeforeunload = function (e) {

        if (formComponent.state.isDirty) {
          var dialogText = "You have unsaved changes, are you sure you want to leave?"
          e.returnValue = dialogText;
          return dialogText;

  • I guess this is being triggered before navigation occured?
    – Palina
    May 8, 2018 at 15:02

I would try something like:

In myWebpart constructor:

localStorage.getItem('location') === window.location.href ? "do nothing" : "aha, navigation occurred !" save window.location.href in localStorage as 'location' // every time


Well, the best option that I can think of now is to use react-router's history.listen(location => () => locationChangeHandler(location)), works perfectly in React app, although haven't tried with SPFx yet

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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