I have the following situation:

I'm on page A which has a call button that redirects the user to page B with URL /calls?id=1234

On page B's componentDidMount(), I want to get the query parameter, use it and then remove it from the URL so that the componentDidMount() does not execute the function again on refresh. Right now I have the following piece of 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);
    }
}

The URL I'm working with looks like this:

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

I believe I gotta use history.pushState but what happens with my code right now is the following:

• I click the button on page A that redirects me to page B.
• I get to page B and the componentDidMount() code executes correctly BUT the URL doesn't change.
• I refresh the page once, componentDidMount() code executes again but this time the URL changes to the correct one.