How to remove the percentage icon in the react-router-dom address bar

Question

How to remove the percentage icon in the react-router-dom address bar

I use react-router-dom to go to the details page about the movie. In the path, I specify

pathname: `/about/${value.title}`, // {value.title} это название фильма, его я получаю через API.

But when there is a space in the movie title, it is replaced in the address bar with a percent icon and the number 20, for example (http://localhost:8080/about/Jojo%20Rabbit, the original title of the movie "Jojo Rabbit"). How can I fix it or do something about it?

Route

    <Switch>
        <Route path="/about/:name" children={<ChooseFilm />} />
    </Switch>

Thanks!

0

javascript reactjs react-router jsx react-router-dom

Author: Volodumr, 2020-05-17

Source

1 answers

score 1 · Accepted Answer

For SEO and readability, it is recommended to replace spaces with "-".

'Film name'.replace(/ /g,"-");

In general, the link must contain only letters, that is, all characters of the name except the letters are replaced with "-" and are reduced to lowercase.