Hi does react router params automatically decodes string?
For example i have this route
<Route path="/callback/:url"/>
and when I call it with C5jb20%3D
it will print C5jb20= when I console.log() that parameters
Is this an expected behavior? Can I change this behavior so that I still get the encoded string?
Thanks!
C5jb20%3D is a URL encoded string, which is a way to encode special characters in a URL. For example, if you have a URL parameter like ?redirect=/some/path, a server could interpret the forward slashes as routing paths, and mess up the expected routing. That's why you see things like ?redirect=%2Fsome%2Fpath, and your example, in URLs.
window.location.path will have the original, unencoded URL.
You could also get it back with encodeURIComponent:
encodeURIComponent('C5jb20=') // "C5jb20%3D"
You probably don't want to, though, depending on your use case.
Related
My react app seems to be automatically decoding %25 to a %, however I need it to stay as %25.
Let's say I have a route that looks like the below. The route has a param which is a string containing an encoded url.
https://mywebsite.com/{encoded_url_string}
As an example, let's say the unencoded url string is:
https://urlparam.com/public/?test=c%3Dvalue
Which, encoded, would become
https%3A%2F%2Furlparam.com%2Fpublic%2F%3Ftest%3Dc%253Dvalue
So the full route would look like this:
https://mywebsite.com/https%3A%2F%2Furlparam.com%2Fpublic%2F%3Ftest%3Dc%253Dvalue
My issue is that when I grab this param (using the query-string library) from the URL, and try to write it to my page, instead of literally being:
https%3A%2F%2Furlparam.com%2Fpublic%2F%3Ftest%3Dc%253Dvalue
Which is exactly as it is in the URL param, I'm getting:
https%3A%2F%2Furlparam.com%2Fpublic%2F%3Ftest%3Dc%3Dvalue
Notice that the last bit in the first one is "test%3Dc %25 3Dvalue" (ignore the spaces, StackOverflow won't let me bold without it), while the second one is just test%3Dc%3Dvalue (missing the %25)
Any ideas why the %25 is being decoded to a simple %? Any way to prevent that?
I'm using React Router v6 (Beta) and have a requirement to allow a path as a param, eg.
"some-url/:folderPath" -> "some-url/some/path/to/a/folder"
This is proving trickier than I expected, though I recognize the obvious confusion caused by slashes being URL delimiters. I found this answer that suggests that at some point React Router allowed for a "+" that would allow the URL param to include everything following that point in the URL, though it no longer appears supported.
Is there an explicit way to approach this problem using the React APIs?
You can encode any character using URL encoding. The encoding for forward slash is %2F. If you replace all the slashes with %2F it should work. You can also call a function that will URL-encode a string.
See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
EDIT:
That being said, the comment by #Linda Paiste is a superior solution.
I am building in invite/registration form for my site. The idea is that one user invites another user, which sends a code with a url to register with. The problem is that the code can have an encoded backslash in it. When that encoded backslash is processed in Angular, it seems to get decoded and ends up busting the routing.
http://localhost:54464/ang/register/owi0%2fCQCrjzBcwqEORVVHhrICIANGKxtxMJ2Kh91y%2bNhhB%2br06appZzEVPhpkP2C
becomes:
http://localhost:54464/ang/register/owi0/CQCrjzBcwqEORVVHhrICIANGKxtxMJ2Kh91y+NhhB+r06appZzEVPhpkP2C
How can I stop this behavior?
Try using a route like:
/register/*code
The code will contain the string with the slashes
source
It is typically used for path-like url arguments...but I don't see why this wouldn't work for your case.
I have been searching for a way to have curly brackets{} and slashes / in the URL. But the URL looks like this:
URL appearance now:
http://localhost/#/?ph=tes:testes%2Ftest%7Blb0%7D
URL wanted appearance:
http://localhost/#/?ph=tes:tests/test{lb0}
How do I get an URL without the %2f etc?
Thanks in advance!
All valid characters that can be used in a URI (a URL is a type of URI) are defined in RFC 3986.
All other characters can be used in a URL provided that they are "URL Encoded" first. This involves changing the invalid character for specific "codes" (usually in the form of the percent symbol (%) followed by a hexadecimal number).
This link, HTML URL Encoding Reference, contains a list of the encodings for invalid characters.
Happy Helping!
These (%2F, %7B) are escape sequences. They represent the special characters that are in your URL, as a URL cannot contain these character directly.
Where do you want exactly to process this URL?
You can use Javascript's unescape(url) to get the escaped URL string back to the original one if you're going to process it in Javascript itself.
Is there a way to make the Play! Framework ignore slashes and ? in parts of the URL?
Typically, if I have the following:
www.123.com/api/link/http:www.bla.com/?contenId=123&User=test
It won't work. In that case, what I would want to do is simply have the link in the last part of the URL in a String variable to save it. I suppose I can force the client to replace the / and ? by something else, but I would rather keep it simple.
My first thought was that maybe there is a way to configure the routing such that we have something like:
/api/link/{data}
where data would hold whatever remains of the URL. Can't find out how to do that though.
You can't have : / ? except your main URL. You should encode your parameter to append it to main URL. See URLEncoder for Java.
This is not a valid URL:
http://www.123.com/api/link/http://www.bla.com/?contenId=123&User=test
It must be:
http://www.123.com/api/link/http%3a%2f%2fwww.bla.com%2f%3fcontenId%3d123%26User%3dtest
Then you can pass it to {data} parameter and decode it in your handler method.