I'm using react and I came across a problem, albeit an aesthetic problem and not a functional one.

I am generating react-routes from an API of names. The route works fine, but as the names have spaces, they appear in the url as: example/lookup/David%20Attenborough

Example: <Link to='{/lookup/' + props.data.name}>{props.data.name}</Link>

Is there a clever way I can remove the spaces: example/lookup/DavidAttenborough or even with + or - to replace spaces without losing the structural integrity of react-router.

I'm using react and I came across a problem, albeit an aesthetic problem and not a functional one.

I am generating react-routes from an API of names. The route works fine, but as the names have spaces, they appear in the url as: example./lookup/David%20Attenborough

Example: <Link to='{/lookup/' + props.data.name}>{props.data.name}</Link>

Is there a clever way I can remove the spaces: example./lookup/DavidAttenborough or even with + or - to replace spaces without losing the structural integrity of react-router.

• javascript
• reactjs
• react-router
• jsx
• react-router-v4

• 4 you could do something like this: props.data.name.split(' ').join(''); Or use regex – floor Commented Apr 6, 2018 at 14:54
• 1 You could use .split(' ').join('-') on props.data.name, but I'm not sure if your router will break – Ron Nabuurs Commented Apr 6, 2018 at 14:55
• 1 @floor you beat me too it – Ron Nabuurs Commented Apr 6, 2018 at 14:55
• Possible duplicate of When to encode space to plus (+) or %20? – Ruan Mendes Commented Apr 6, 2018 at 15:06
• 1 It's called a slug, you can do this with slugify or others. What do you mean by losing the structural integrity of react-router? – Gabriel Bleu Commented Apr 6, 2018 at 15:46

3 Answers 3

Actually, + is not valid as an encoding for spaces in the path, only in the query string. See When to encode space to plus (+) or %20? and https://github./ReactTraining/react-router/issues/2407

You cannot do what you are asking

You can use regex for Putting (- or +) in the url example

let name = props.data.name;
name = name.replace(/\s+/g, '-');
const url = `/lookup/${name}

<Link to={url}>{props.data.name}</Link>

you can either add + or -

This works for me:

<Link to={`/lookup/${props.data.name.split(` `).join(`-`).toLowerCase()}`}>{props.data.name}</Link>