CODEWITHSUNDEEP
javascriptreactjsreact-router
dhj
dhj

Reputation: 4805

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 

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

So this doesnt work as the hyphen breaks it, how can I change it so I only extract the last hyphen as the param, I don't really want to change my slug generation system to use a different character as these are the most readable IMHO, but are only used for information, not content loading.

Thanks

Upvotes: 5

Views: 4878

Answers (2)

habib
habib

Reputation: 2446

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.

Upvotes: 0

Tomasz Mularczyk
Tomasz Mularczyk

Reputation: 36169

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();

Upvotes: 1

Related Questions