An unopinionated way to get dynamic routes in React
Hi, this is going to be a relatively short article. In it, i'm going to show the way I get dynamic routes in my React apps. If you've heard of dynamic routes they are basically routes or parts of routes that aren't hard coded in, the path is dynamically injected.
// hard coded route
<Route path="/hashnode/username" render={<p>Hi</p>} />
//dynamic route
<Route path="/hashnode/:username render={<p>Hi</p>} />
So via the dynamic route you can navigate to /hashnode/timothy
or /hasnode/thomas
etc it'll all work.
So now if you wanted to get :username
, assuming the path is /hashnode/timothy
in React you'd have to go
props.match.params.username //returns timothy
or alternatively you could go:
const {match} = props;
const {username} = match.params;
//returns timothy
And that's fine really but what if you or someone on your team changes it from :username
to user
? then you have to go to the file where you got the dynamic route and change it to user too because the property username
no longer exists. If you don't that part of your app breaks.
The code below is an unopinionated way I get dynamic routes in my applications, unopinionated in the sense that it does not care what the name of the dynamic route is, it will always be able to get it regardless.
Object.keys(props.match.params).map(el=> props.match.params[el]).join('')
There you have it, ! Hope you enjoyed this article and until next time, be well.