Next.js: '%' (percent sign) causes 'URI malformed' error on next/router

[woongbaera89]

Code Example

    Router.replace({
      pathname: "/search",
      query: { q: "100%" } 
    });

or

<Link href={{ pathname: '/search', query: { q: "sale 10%" } }}>
    link
</Link>

Error

debug console

VM777 main.js:9882 Uncaught (in promise) URIError: URI malformed
    at decodeURIComponent (<anonymous>)
    at Object.push../node_modules/querystring-es3/decode.js.module.exports (VM777 main.js:9882)
    at Object.f [as parse] (VM777 main.js:4666)
    at VM777 main.js:8795
    at new Promise (<anonymous>)
    at new F (VM777 main.js:1802)
    at Router.change (VM777 main.js:8758)
    at Router.replace (VM777 main.js:8751)
    ...

../node_modules/querystring-es3/decode.js::68

    v = decodeURIComponent(vstr);   //  this code causes 'URI malformed' error

Description

In my nextjs project, some people enter search query includes '%' (percent sign).
And that makes error like above.
Thanks.

[rafaelalmeidatk]

You should encode the string before adding it to the URL: query: { q: encodeURI("100%") }

[woongbaera89]

You should encode the string before adding it to the URL: query: { q: encodeURI("100%") }

Thank you for reply.

When I pass url query that should be encoded (ex: plus sign, blank space, korean language, etc) ,
"Next/Router" encodes that queries well.

If use encode query at client side, url will be twice encoded.

Only "%" make this problem.

example:

// It works.
   Router.replace({
      pathname: "/search",
      query: { q: "가방 1+1" } 
    });

url result:

/search?q=%EA%B0%80%EB%B0%A9%201%2B1

[Timer]

Filed upstream bug https://github.com/GoogleChromeLabs/native-url/issues/13

[rafaelalmeidatk]

@woongbaera89 sorry for the wording, I should have said "you can try" instead of "you should" since I was not sure the encoding was done in the router 😊