encodeURI() encodes a whole URL but keeps / ? & = #, so it cannot protect a value containing &. encodeURIComponent() leaves only A-Z a-z 0-9 - _ . ! ~ * ' ( ); use it per value, or let URLSearchParams (URLSearchParams) do it. The decode twins reverse them.
const q = 'rock & roll/50%';
console.log(encodeURI(`https://example.com/a b?q=${q}`));
console.log(`https://example.com/search?q=${encodeURIComponent(q)}`);
console.log(new URLSearchParams({ q }).toString());https://example.com/a%20b?q=rock%20&%20roll/50%25 https://example.com/search?q=rock%20%26%20roll%2F50%25 q=rock+%26+roll%2F50%25