3

I am using next-routes and my application URL need to receive parameter as name that contains % and # characters. For example, "C#", "100%" etc.

So its URL will look like below.

  1. https://myapp.com/name/C#
  2. https://myapp.com/name/100%
  3. https://myapp.com/name/harry_potter

For "C#", I have found that query value from the getInitialProps function will be "C" only (# character is cut) and for "100%", I have found that next-routes return error as below. URI malformed has occurred on decodeURIComponent function because of % character.

https://user-images.githubusercontent.com/18202926/48536863-659f6d00-e8e2-11e8-8c64-a0180b51e921.png

If I need to handle both of characters, could you please suggest how can I handle them by using next-routes?

NB. I opened the issue on next-routes here

PenguinScola
  • 31
  • 1
  • 7

1 Answers1

1

You will have to encode the URI component so that the special characters are not used.

if you must get C# it would be encoded as "C%23" 100% would be "100%25" and so forth.

use the encodeURIComponent() function to generate the appropriate URI.

Hope it helps. refer if needed : escaping special character in a url

Gangula
  • 5,193
  • 4
  • 30
  • 59
Dhananjai Pai
  • 5,914
  • 1
  • 10
  • 25
  • Thanks for your reply :). Your solution is fine for api but my URL is from the user put into a browser so we can't force them to put encoded text. For example : when they put "100%", a browser doesn't change it to "100%25". – PenguinScola Feb 06 '19 at 06:27
  • @PenguinScola if you are defining the routes based on the userInputs, you can very well redirect after encoding as above. Users seldom enter the entire URL themselves and would usually bookmark based on existing URL or click on some hyperlink. In either case, you can generate the URL after encoding it. But if the user manually decides to enter special characters, I am afraid there is little that can be done to remove the ambiguity – Dhananjai Pai Feb 06 '19 at 06:36
  • Using `encodeURIComponent` doesn't work with Next's `getStaticPaths`; see https://github.com/vercel/next.js/issues/11016#issuecomment-778334707 – machineghost Dec 27 '21 at 21:59