Matching Routes With Hyphens In React-router

I have URLs like this; http://0.0.0.0/country/bosnia-and-herzegovina-644 This is my Route declaration

Solution 1:

I don't know if you can do that, but maybe you could do this:

<Route path="/country/:country" component={CountryPage} />

then in the component:

const countryId = this.props.match.params.country.slice('-').pop();

Solution 2:

You can't use hyphen - sign for both parameters separation and words separation.

You can use hyphen - for parameters separation and underscore _ for space between countrySlug words.

Here your URL will look like

http://0.0.0.0/country/bosnia_and_herzegovina-644

Now use this Route declaration

<Route path="/country/:countrySlug-:countryId" component={CountryPage} />

When you will generate your link don't forget to replace space with _ sign otherwise your URL will look like this.

http://0.0.0.0/country/bosnia%20and%20herzegovina-644

But still, it will work fine.

Share