reactjsreact-routerencodeuricomponent

enocde uri in React Router

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.

Solution

  • 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.