tengo la siguiente situacion:

Estoy en la página A que tiene un botón de llamada que redirige al usuario a la página B con la URL /calls?id=1234

En el componentDidMount() de la página B, quiero obtener el parámetro de consulta, usarlo y luego eliminarlo de la URL para que el componentDidMount() no ejecute la función nuevamente al actualizar. En este momento tengo el siguiente fragmento de código:

 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); } }

La URL con la que estoy trabajando se ve así:

 https://127.0.0.1:8080/#/calls?id=test

Creo que tengo que usar history.pushState, pero lo que sucede con mi código en este momento es lo siguiente:

• Hago clic en el botón de la página A que me redirige a la página B.
• Llego a la página B y el código del componentDidMount() se ejecuta correctamente PERO la URL no cambia.
• Actualizo la página una vez, el código del componentDidMount() se ejecuta de nuevo, pero esta vez la URL cambia a la correcta.