4

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.

1

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) {
        debugger;

        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? – Polina Potrebko May 8 '18 at 15:02
1

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 – Polina Potrebko Jul 16 '18 at 11:07
0

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

0

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, privacy policy and cookie policy

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