title: How to remove the query parameters from the URL once the page loads and the function that requires them goes through?
body: <p>I have the following situation:</p>
  <p>I'm on page A which has a call button that redirects the user to page B with URL <code>/calls?id=1234</code></p>
  <p>On page B's <code>componentDidMount()</code>, I want to get the query parameter, use it and then remove it from the URL so that the <code>componentDidMount()</code> does not execute the function again on refresh. Right now I have the following piece of code:</p>
  <pre><code>componentDidMount() {
      const qParams = new URLSearchParams(window.location.hash.split('?')?.pop());
  
      if (qParams.has('id')) {
          this.initiateCall(new DiallerRoomUser(
              DiallerRoomUserType.matrix,
              getLocalUserIdFromUserId(qParams.get('id')),
          ));
          qParams.delete('id');
          const url = new URL(window.location);
          url.hash = '#/calls';
          window.history.pushState({}, '', url);
      }
  }
  </code></pre>
  <p>The URL I'm working with looks like this:</p>
  <pre><code>https://127.0.0.1:8080/#/calls?id=test
  </code></pre>
  <p>I believe I gotta use history.pushState but what happens with my code right now is the following:</p>
  <ul>
  <li>I click the button on page A that redirects me to page B.</li>
  <li>I get to page B and the <code>componentDidMount()</code> code executes correctly
  BUT the URL doesn't change.</li>
  <li>I refresh the page once, <code>componentDidMount()</code> code executes again but
  this time the URL changes to the correct one.</li>
  </ul>