Javascript – how can i include an array as react-router-dom parameter?

I want to pass an array as a react-router-dom parameter like so:

website.com/[a,b,c]/

this works when I type this directly into the search bar and turn it into an array with the following code:

JSON.parse(arrayParam)

after which I can use it as an array.

problem is that when I send someone the above link, the link becomes:

website.com/%5ba,b,c%5d/

and it stops working.
I’ve tried the following:
passing the array as
website.com/a,b,c
and using

arrayParam.split(',')

does not become an array

I’ve tried decoding the URI website.com/%5ba,b,c%5d with:

  const decodedArrayParam = decodeURI(arrayParam);
  const myArray = JSON.parse(decodedArrayParam);
  console.log(myArray);

which console logs undefined
same happens when I also encode the ‘,’: https://example.com/my-page/%5B1%2C2%2C3%5D/
or when U use `decodeURIComponent’ instead

which gives me the same error. I’ve tried using toString to parse the URI param first, with no success.

Any solutions or workarounds that would achieve the same thing? Or any way to prevent the original link from changing?

In my app.js I have:

 <Router>
        <Routes>
          <Route
            path={`/:arrayParam`}
            element={<Main className= 
           {styles.main} />}
          />
        </Routes>
</Router>

in main.js I have for the regular method with website.com/[1,2,3]/:

import {useParams, useSearchParams} from 'react-router-dom';
const RouterParams = useParams()
const myArray = JSON.parse(RouterParams.arrayParam);

This is working, can use the array

for the splitting method with website.com/1,2,3/

import {useParams, useSearchParams} from 'react-router-dom';
const RouterParams = useParams()
const myArray = (RouterParams.arrayParam).split(',');
console.log(myArray)

This is not working, gives undefined.

or, for the URL decoding with website.com/%5Ba%2Cb%2Cc%5D/ or website.com/%5Ba,b,c%5D/

import {useParams, useSearchParams} from 'react-router-dom';
const RouterParams = useParams()
const myArrayParam = (RouterParams.arrayParam)
const decodedArrayParam = decodeURIComponent(myArrayParam);
const myArray = JSON.parse(decodedArrayParam);
console.log(myArray)

This also gives undefined

I also have the following in main.js, to prevent users from going back to a previous page. Somehow, this prevents me from using regular URL parameters because they are immediately removed

    useEffect(() => {
        window.history.pushState(null, null, window.location.pathname);
        window.addEventListener('popstate', onBackButtonEvent);
        return () => {
            window.removeEventListener('popstate', onBackButtonEvent);
        };
    }, []);

    // Alert a warning if people try to go back to previous page
    const onBackButtonEvent = (e) => {
        e.preventDefault();
        if (!finishStatus) {
            if (window.confirm(
                "You cannot go back to a previous page, 
                Please close the window if you wish to exit")
            ) {
                setfinishStatus(true)
                // your logic
            } else {
                window.history.pushState(null, null, 
                window.location.pathname);
                setfinishStatus(false)
            }
        }
    }