利用URLSearchParams獲取URL Query參數 更新網址

const params = new URLSearchParams(window.location.search);

window.history.replaceState({}, '', `${window.location.pathname}?${params}`);

const params = new URLSearchParams(window.location.search);
params.get('foo1'); // "bar1"
console.log(params.toString()); // "foo1=bar1&foo2=bar2" 就是?之後的部分

const params = new URLSearchParams(window.location.search);
params.set('foo1','abc'); // replace the original value
console.log(params.toString()); // "foo1=abc&foo2=bar2"
params.append('foo1','def'); // add a new value
console.log(params.toString()); // "foo1=abc&foo2=bar2&foo1=def"
params.get('foo1'); // 'abc'
params.getAll('foo1'); // ['abc','def']
params.delete('foo2'); //delete a key
console.log(params.toString()); // "foo1=abc&foo1=def"

window.history.replaceState({}, '', `${window.location.pathname}?${params}`);

const params = new URLSearchParams(window.location.search);
params.set('foo1','abc');
window.history.replaceState({}, '', `${window.location.pathname}?${params}`);

import { useEffect } from 'react';

function myApp (){
    useEffect ( () => {
    if(window.location.search){
      const searchParams = new URLSearchParams(window.location.search);
      doSomething (searchParams.get('foo1')); // do something
    }
  },[]); // this empty array is a trick to make useEffect to run only once when the page mounted
}