enocde uri in React Router - reactjs

Is there any way to encode the uri in to prop of <Link> in react router.
my code:
<Link to={`info/${props.movie.Title}`}> info </Link>
I have tried encodeURI() but it does not work.
uri = encodeURI(`info/${props.movie.Title}`)
console.log(uri);
<Link to={uri}> info </Link>
Clicking on the link gives the url as "http://localhost:3000/info/Man of Steel" as opposed to "http://localhost:3000/info/Man%20of%20Steel".
Is there a way to get the latter?
Edit
React works perfectly. My bad. Firefox somehow doesn't encode spaces in URL bar. But other special characters get encoded. So my question changes to why are spaces not encoded by Firefox in the URL bar. I also noticed that copy pasting the link gives %20 instead of space.
Edit 2
Firefox decodes spaces and displays it in the URL bar as opposed to other browsers which display %20. Encoding is actually done in the background.

encodeURIComponent() and React works perfectly. The issue was that the latest version of Firefox doesn't show space as encoded. It is encoded. Copy pasting it gives %20. But it will be displayed as space in Firefox URL bar. Other browsers still give %20.

You don't have to use some random string in URL address. Instead of it you can use id of movie ( info/:id ) and then get movie by id and show to user. As the result you don't need to decode string because it is not reliable

Related

Handling Dynamic Image click using Selenium Webderiver

I am working on image click functionality where images change dynamically but the XPath remains the same.
For example:
First image inspect element:
<a id="adlink" target="_top" href="http://www.jimhayes.com/lennielw/index-2.html">
<img id="adimage" src="http://egranary/adverts/Images/lightwire.png" border="0"></a>
First image XPath:
//*[#id="adimage"]
Second image inspect element:
<a id="adlink" target="_top" href="http://www.lifewater.ca/index.html">
<img id="adimage" src="http://egranary/adverts/Images/lifewater1.png" border="0"></a>
Second image XPath:
//*[#id="adimage"]
In this example source and target are changing constantly to redirect to particular page when clicked on image.
How to handle this situation using selenium webdriver?
I think your requirement is to basically check if the links are working fine - not broken.
In that case, I would suggest you to follow this approach - (It is in Java - you can do something similar in other languages as well)
I am trying to extract all href on the page. But if you want an specific xpath just change it here.
driver.get("https://www.yahoo.com");
Map<Integer, List<String>> map = driver.findElements(By.xpath("//*[#href]"))
.stream() // find all elements which has href attribute & process one by one
.map(ele -> ele.getAttribute("href")) // get the value of href
.map(String::trim) // trim the text
.distinct() // there could be duplicate links , so find unique
.collect(Collectors.groupingBy(LinkUtil::getResponseCode)); // group the links based on the response code
Now we could access the urls based on the response code we are interested in.
map.get(200) // will contain all the good urls
map.get(403) // will contain all the 'Forbidden' urls
map.get(404) // will contain all the 'Not Found' urls
map.get(0) // will contain all the unknown host urls
Check here for complete implementation.

React.js - how to navigate to other domain?

I'm working on editor where user can set link to another website , for example stackoverflow.com. If user set this url to <a> element and then click on this link he will be navigated to http://myapp.com/stackoverflow.com but not to http://stackoverflow.com. I supposed that this is caused by changed default behavior of element.
How can i make this link external? if user will copy url from browser and paste he will paste http://stackoverflow.com and hence everything will works fine. But in case he manually enter stackoverflow.com nothing will work fine.
P.s. i also would like to make each element with attribute target="_blank" so, i assume that i can't navigate programatically
Any ideas?
Try setting the <a>'s href attribute to the full url, not just stackoverflow.com:
<a href="http://stackoverflow.com" />
Otherwise it's treated as a relative url.
Add a check to see whether your users input the url as stackoverflow.com, and if they do, change it to http://stackoverflow.com before setting the href attribute.
Didn't get your other question about programmatic navigation, but if you want a link to open in a new window/tab, use
<a href="http://stackoverflow.com" target="_blank" />

Avoid Concat URL in React-Redux-Router

I am using react-router + react-router-redux in my app.
What I want to achieve is every time user click a tab in the dashboard it will change the URL to /dashboard/messages, for instance.
However, using push('dashboard/' + page), every time I click a tab it will append the link.
My current situation:
Current URL is /dashboard.
Click a Messages tab.
The URL changes into /dashboard/messages.
Click a Home tab.
The URL changes into /dashboard/messages/dashboard/home.
Is there any way to just replace the /dashboard/messages into /dashboard/home when we click Home tab after cliked the Messages tab?
Many thanks!
I found the silly mistake, sorry for this.
So apparently it has to be push('/dashboard/' + page) instead of push('dashboard/' + page).
If you're coming in here from a react-router-dom perspective, please note that <Link to='stringUrl' /> concatenates whatever you place on the to attribute to the current path. So, if you are currently on /home path, it will produce /home/StringUrl as a result.
However, if you place a forward slash / instead, i.e. <Link to='/stringUrl' /> it won't do that, thus producing /StringUrl path.
use this
push('/dashboard/' + page)

How do I show Chinese (Non-ASCII) characters in URL

I am using AngularJS to develop an Chinese website. I used ui-router to manage the URL links, and the params for the URL is in Chinese.
Here is the code, schoolName is an variable in controller, and the value is Chinese characters:
<a ui-sref="showSchools({name:schoolName})" > 查找</a>
The problem is it will generate URL like:
http://localhost:8080/#/showSchools?name=%E7%A6%8F%E5%BB%BA%E7%9C%81%E9%97%BD%E4%BE
But i want the link to be like:
http://localhost:8080/#/showSchools?name=第一中学
I tried encode param into utf8 with encodeUri filter: https://github.com/rubenv/angular-encode-uri, but it does not work.
Is there anybody know how to show Chinese characters in the URL?
This might be too late but I thought it might help.
I too had this same issue while trying to display chinese characters in the url while testing a angular app (with ui-router) with localhost.
The urls used to appear as below:
http://localhost:56066/#/map/%E6%B1%9F%E8%8B%8F
But as soon as I added the below line to clean up the url:
$locationProvider.hashPrefix('!').html5Mode(true);
The urls now appear as below (which is what I hoped they would look like):
http://localhost:56066/map/黑龙江
I haven't yet figured out why cleaning up the url helped!

Webbrowser control and query string WP7

Im using the WebBrowser control to launch and browse some html files loaded locally in the windows phone 7 emulator and device. All works fine until a web page navigation with a query string us used. The javascript needs to read these query strings but the navigation totally fails when the query string is included. The navigation works fine without the query string.
Im big time stuck on this and would really appreciate your thoughts.
Tony
I too can't find a way to pass a query string to a local HTML file. (I copied the HTML file to Isolated Storage and viewed it from there.)
However...
I can successfully navigate to a local HTML file and specify a fragment. And it even works if the fragment includes equals signs (=) and ampersands (&) so you can do this:
webBrowser1.Navigate(new Uri("index.html#123=abc&456=def", UriKind.Relative));
And get the value with the following
<html>
<head>
<script type="text/javascript">
function onLoad() {
fs.innerHTML = document.location.href.split("#")[1];
}
</script>
</head>
<body onload="onLoad()" >
<p id="fs" />
</body>
</html>
to display the following on the page (in the browser control).
123=abc&456=def
(Obviously you could do something more appropriate with the value in javascript as necessary.)
Yes, you can just use the fragent like the querystring.
This, obviously, works fine as long as you don't need to use both.
You need a webserver if you pass a querystring.
This is because the browser does not know what is a query string in difference of another file. It only thinks the file is named "file.html?param=value" search this file and does not find it locally.
So locally without a webserver it is impossible.
Solutions
Spawn a tiny webserver locally.
Hack some js to know when it is local and replace all links with query string to hashtags

Resources