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.
Related
I am trying to define a react-router with an optional url parameter prefixed with a namespace. This is an example of such a path:
path="authors/:authorId/posts/:postId?"
// application.com/authors/8/posts/4
I want the postId variable part to be optional, but this should include the whole /posts/:postId part to be optional. Is this possible?
Not sure why this is a thing that some developers want (haven't seen a good use case scenario where you would need to structure your URL as such), but the simplest solution is to instead just use a query.
http://www.example.com/authors/author?authorId=8&postId=4
Nonetheless, while the answer provided below is specific to the question, the set up for your desired URL structure is the same (see second approach in the answer): React Router v4 Nested match params not accessible at root level
Trying to enable letsencrypt with web2py. As part of that I may need to create a route for a url like www.example.com/.well-known/acme-challenge/<some long string>
As I test this I notice that the following route works:
('/\.well-known/acme-challenge/test.html',
'/some_app/static/well-known/acme-challenge/test.html'),
While this almost identical route doesn't:
('/\.well-known/acme-challenge/test.html',
'/some_app/static/.well-known/acme-challenge/test.html'),
The only difference between these two routes is that in the latter one, in the second element of the tuple, .well-known has a leading period while the former route has well-known without a period.
Note I did try escaping the period like \.well-known but it doesn't work either.
Why does the route with the leading period not work? And how can I fix it?
Even though it is a static URL, the path segment immediately after /static/ is interpreted as the controller function and is therefore expected to be a valid Python identifier (the regular expression used to match that part of the path is \w+).
Note, rather than having web2py serve the letsencrypt response, you might consider configuring your web server to return the response directly (e.g., it is easy to configure Nginx to do this).
I haven't come across a direct solution to the leading period issue (as mentioned by Anthony web2py expects a valid python identifier)
However, to solve the specific problem of working with Let's Encrypt I did follow Anthony's suggestion to handle it in the webserver. I am using Apache, in my httpd.conf I added:
LoadModule alias_module modules/mod_alias.so
Alias "/.well-known/" "/var/www/html/somedirectory/.well-known/"
Note Alias will automatically map whatever comes after the url path. Example with the above Alias:
example.com/.well-known/something/hello
will map to
/var/www/html/somedirectory/.well-known/something/hello
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.
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 am using angularjs router, as the application development is almost done, I cant use UI-router. Recently I implemented two optional parameter in route by following this answer.
Here is what I did.
app.when('/someUrl/:param1?/:param2?',{
templateUrl:'templateurl',
controller:'controllerName'
});
But when I use $location.path('/someUrl/1234/5678');, the url is adding equivalent hex code of '?' in URL either parameter is available or not.
I am not sure why this parameter is coming even if I am sending parameter.
the url is looking like
localhost/someurl/1234%3F/5638%3F
How can avoid this %3F and keep optional routing functionality without using duplicate route definitions.
**Sorry for typo mistake, I already defined routes with :, that is not problem with :.
%3F is ?, Since you have not provided the : its treated as part of URL thus they are encoded.
You need to use : to define parameter.
app.when('/someUrl/:param1?/:param2?',{
templateUrl:'templateurl',
controller:'controllerName'
});