In our NextJS application we have a URL that is fed with various query strings.
With some query strings, however, we have the problem that they are displayed in encoded form. For example like this:
http://localhost:8080/my-app/test-app?project=project%3Aone&project=project%3Atwo
As you can see, the colons are replaced with %CA.
I know that this may be a default behavior, but I need the colons in the URL.
Is there any way I can get this? So I need to URL above like:
http://localhost:8080/my-app/test-app?project=project:one&project=project:two
We are using URLSearchParams() like this:
const constructQueryString = (params: any) => {
const searchParams = new URLSearchParams();
const projects = params.project.split(',');
projects.forEach((p) => {
urlSearchParams.append('project', p);
});
return searchParams.toString();
};
These are escape codes for special characters in the URL that are necessary and cant be avoided. Also, there's no need for you to use URLSearchParams. Just use router.query will give you query and router.pathname for the path (/my-app/test-app) in nextJS
Use the decodeURIComponent global function in Javascript
const decodedPath = decodeURIComponent("http://localhost:8080/my-app/test-app?project=project%3Aone&project=project%3Atwo")
The Result is what you want as below:
http://localhost:8080/my-app/test-app?project=project:one&project=project:two