Remove '%20' from URL - React-Router

Question

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.com/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.com/lookup/DavidAttenborough or even with + or - to replace spaces without losing the structural integrity of react-router.

Answer 1

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.com/ReactTraining/react-router/issues/2407

You cannot do what you are asking

Answer 2

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 -