1

In order to allow for URL parameters to have percent signs, I use this code:

<Link to={"project/" + encodeURIComponent(projectName.replace("%", "%25"))}>{projectName}</Link>

The link above takes me to the projects page. This is how I decode the projectName parameter on the projects page:

const projectName = decodeURIComponent(match.params.projectName);

This code works. However, if I refresh the projects page or use the browser back/forward button to navigate to the projects page, I get an error when decoding. URIError: URI malformed

It looks like the match.params.projectName is already decoded after refreshing / navigating with forward / back buttons. This causes the error to occur.

Wyatt
  • 73
  • 2
  • 7

2 Answers2

0

The issue is caused by the way React Router decodes URIs. Specifically the way it handles the % character.

I solved this issue by replacing every % in the URI parameter with some random text. Something that would never happen to show up in your program. ie...123PERCENTREPLACEMENT123.

It is basically a manual encoding of the percent sign that I must decode on the other end by replacing that same unique string with a % sign.

Wyatt
  • 73
  • 2
  • 7
0

I've run into the same problem. Apologies for posting my response as an answer, but I have yet to get enough rep to comment and this response is a bit packed with details. In the comments of an answer to the post Using percent ( % ) sign in react-router :id you will find that @james-conkling mentions that the bug is in the react-router history library:

This is a bug in the react router history library. This PR will need to get merged, and react router will need to bump its version.

The PR referenced is #751 and has since been merged (June 12, 2020). Unfortunately it seems that, as of time of this writing, the latest version of react-router is v5.2.0 (May 11, 2020) and the PR above likely won't be included until react-router v6. I wasn't able to find any estimates for when React Router will release v6. There is a version v6.0.0-beta that was tagged on June 19, 2020. I'm unable to test v6 in my app, and will be unable to, for an unrelated reason:
React: 'Redirect' is not exported from 'react-router-dom' ( beware of breaking API changes when upgrading to v6 )

Tim Harsch
  • 31
  • 5