React => Uncaught URIError: This is likely caused by an invalid percent-encoding. Fix

Question

Was working in react and then encountered a problem like

  Uncaught URIError: This is likely caused by an invalid percent-encoding

Im working with news API at the moment and some of the articles might include %. My entire app depends on displaying news articles names in url because im using this.props.match.params.id

I tried to search for a solution online but most of them are very unclear when it comes to solving this exact problem.

Is there a simple workaround this issue?

Answer 1

You need to use encodeURIComponent() with the path you receive as parameter: Example:

const receivedArticleName = encodeURIComponent('Article Name with %');

Since you are working with an API, once you receive it, set your URL variable with that receivedArticleName and you're done.

Answer 2

Step 1 Go to /node_modules/history/esm/history.js:87

Step 2 Comment this snippet

try {
location.pathname = decodeURI(location.pathname);
} catch (e) {
if (e instanceof URIError) {
  throw new URIError('Pathname "' + location.pathname + '" could not be 
  decoded. ' + 'This is likely caused by an invalid percent-encoding.');
} else {
  throw e;
}}

Step 3 Run npm Start