useSearchParams not parsing URL params containing escaped ampersands (&)

[Haldaug]

I have a dashboard page using searchParams to filter different data views. I would like to submit the different filter combinations as different pages to Google search console using sitemap.ts. The problem is that google does not accept url's in the sitemap containing an unesescaped ampersand character (&). Thus, url's like the following wont be submittet: ?cat1=TRANSPORT&cat2=TRANSPORT_ROADS&cat3=TRANSPORT_ROADS_CARS

The obvious solution to this is to encode the ampersands as %26, but the problem is that useSearchParams and searchParams won't parse the different params delimited by the ampersands. The above url is parsed as
{cat1: "TRANSPORT&cat2=TRANSPORT_ROADS&cat3=TRANSPORT_ROADS_CARS"}

[icyJoseph]

Does it work to use it as an HTML entity instead? The problem is that your sitemap is XML right?

[Haldaug]

One hack solution to this could be to check for both amp;cat2 and cat2 when fetching searchParams and redirect the site accordingly.

[icyJoseph]

I am a bit confused here, if you use the HTML entity in the XML document, then when it is parsed into a data structure, it will be decoded and & used, this is out of your control.

If you take however, what the XML contains and try to pass it through new URLSearchParams you'll get what you describe, but you should not do that...

I think, it is the case, that no requests with amp;cat2 would arrive to your site.

[Haldaug]

OK, so I should just trust that Google parses & as a plain & and that no robots from google will try to access my page and get 404 messages using unparsed entities?

[icyJoseph]

Well, yes that's my stance. I can "prove" it like this:

Say you have:

<route>
  <from uri="example:start?foo=1&amp;bar=2"/>
  <to uri="example:result"/>
</route>

Then I can do:

const xml = `<route>
  <from uri="example:start?foo=1&amp;bar=2"/>
  <to uri="example:result"/>
</route>`

const parser = new DOMParser();

const result = parser.parseFromString(xml, 'text/xml');

console.log(result.getElementsByTagName("route")[0].children[0].attributes.uri)

And that'll give me back the proper query params. So, anyone who parses your XML, properly, will get the correct query params into their data structure, and be able to make the right calls

And that'd log