I want to encode uri, using Link tag of react-router-dom but when I use javascript encodeURIComponent to encode uri it does not show encoded uri in address bar(url bar) though i see uri encoded when i hover.
<Link key={i} to={encodeURIComponent(item.url)}> {item.text}</Link>
Am I mising anything or uri is decoded inside react router dom.
I want to encode uri, using Link tag of react-router-dom but when I use javascript encodeURIComponent to encode uri it does not show encoded uri in address bar(url bar) though i see uri encoded when i hover.
<Link key={i} to={encodeURIComponent(item.url)}> {item.text}</Link>
Am I mising anything or uri is decoded inside react router dom.
Share Improve this question edited Jan 31, 2018 at 8:27 Vikas Yadav 3,3542 gold badges23 silver badges22 bronze badges asked Jan 30, 2018 at 13:49 AnsAns 3443 gold badges4 silver badges11 bronze badges 2-
Try to fix like that
<Link key={i} to={encodeURIComponent(item.url)}}> {item.text}</Link>– Andrew Paramoshkin Commented Jan 30, 2018 at 13:51 - Andrew I used the same...I edited my question...Thanks – Ans Commented Jan 30, 2018 at 17:14
1 Answer
Reset to default 2The Link in react router dom decodes the uri while pushing it to history.
Anybody can read this issue in github and related issues
Path is decoded in createLocation #505
https://github./ReactTraining/history/issues/505
I did workaround of this issue by double encoding the uri so that it is decoded once while pushing in history.
encodeURIComponent(encodeURIComponent(item.url))
till now I have not found any side effects of this....hope this helps anybody facing this issue.