Remove search params without reloading the page

[quangIle]

Hi, I have this solution for removing search params without reloading the page. But I am wondering if I monkey patch the pushState and replaceState of window.history is ok; or calling replaceState with window.history.state will affect anything?

I know that I can also use useEffect with useSearchParams hooks but I think by doing this, the search param will be removed as soon as the document is loaded.

Here is my code:

<script
      nonce={nonce}
      dangerouslySetInnerHTML={{
        __html: `
          function removeNotificationReferrerId() {
            const url = new URL(window.location.href);
            if (url.searchParams.has('notification_referrer_id')) {
              url.searchParams.delete('notification_referrer_id');
              window.history.replaceState(window.history.state, '', url.toString());
            }
          }
          function watchHistoryEvents() {
            const { pushState, replaceState } = window.history;

            window.history.pushState = function (...args) {
                pushState.apply(window.history, args);
                window.dispatchEvent(new Event('pushState'));
            };

            window.history.replaceState = function (...args) {
                replaceState.apply(window.history, args);
                window.dispatchEvent(new Event('replaceState'));
            };

            window.addEventListener('popstate', removeNotificationReferrerId);
            window.addEventListener('replaceState', removeNotificationReferrerId);
            window.addEventListener('pushState', removeNotificationReferrerId);
          }
          removeNotificationReferrerId();
          watchHistoryEvents();
`,
      }}
    />

[GabenGar]

Can't you just use replace prop on <Link> component or options.replace on useNavigate() depending on your usecase?

[quangIle]

Thank you for your comment. And, yes, I can. I also thought of using redirect in loader but those will rerun the loaders. I see that GitHub remove the search params on client side without reload the page and I am trying to copy it.

[GabenGar]

Rerunning loaders is not a problem if it returns redirects before running any other logic. Can even do it in client loaders where applicable.

[rururux]

maybe the shouldRevalidate function would be useful.