Intercepting Query String Changes in composants WebPart

Lorsque vous construisez un élément Web Part qui doit prendre en compte les modifications apportées aux chaînes de requête, vous pouvez utiliser l’API web pour lire la chaîne de requête (également appelée window.location.search paramètres d’URL). Toutefois, si l’utilisateur clique sur un lien sur la page qui contient le même chemin d’accès que l’URL actuelle et que seule la chaîne de requête change, l’URL dans la barre d’adresses sera mise à jour, mais la page ne sera pas restituer (pour des raisons de performances). Ce document vise à montrer comment vous pouvez tirer parti d’autres API web pour suivre les modifications apportées aux chaînes de requête et y répondre dans votre partie Web.

Tout d’abord, supposons que vous avez une classe de partie Web Part de base qui restituera la chaîne de requête actuelle.

export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
  public render(): void {
    this.domElement.innerHTML = window.location.search;
  }
}

Nous pouvons utiliser les modifications suivantes pour déclencher le nouveau rendu de notre partie Web Lorsqu’un paramètre d’URL est mis à jour :

export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
  public onInit(): Promise<void> {
    ((history) => {
      var pushState = history.pushState;
      history.pushState = (state, key, path) => {
          pushState.apply(history, [state, key, path]);
          this._onUrlChange(path);
      };
    })(window.history);

    window.addEventListener('popstate', function (e) {
      // Currently browsing by the browser history buttons ( back / forward )
      // doesn't cause any effect on a sp conditionally loaded page.
      // this._onUrlChange();
    });

    return Promise.resolve();
  }

  public render(): void {
    this.domElement.innerHTML = window.location.search;
  }

  private _onUrlChange(newpath = window.location.search): void {
    // any logic you might want to trigger when the query string updates
    // e.g. fetching data
    // e.g. logging the URL changes // console.log(newpath)
    this.render();
  }
}

Il existe deux parties de ce que nous faisons dans onInit :

  1. Garantit que chaque fois que pushState est appelé par d’autres javaScript, nous déclenchant notre _onUrlChange() méthode.
  2. Garantit que chaque fois que le navigateur déclenche un événement (par exemple, l’utilisateur appuyant sur le bouton Retour popstate du navigateur), nous déclenchant notre _onUrlChange() méthode.