Using ES6 Maps for react-router, how can we tweak Map.get?

Question

I have created a map with new Map() to store my RR4 configuration in my app.

I want to access the values of /countries/:id , when I get /countries/1

routesMap.get('/countries/1') 
// should return the same as to routesMap.get('/countries/:id')

routesMap.get('/countries/1/comments/20'); 
// should match routesMap.get('/countries/:countryId/comments/:id')

By creating a class from Map , how can I tweak the get so it become more intelligent to get my react-router-dom path ?

Answer 1

A simple attempt would be something like the following

 class RouteMap extends Map { get(key) { let match; // exact match if (this.has(key)) return super.get(key); // not exact match, need to apply logic for (let route of this.keys()) { const reg = new RegExp(`^${route.replace(/:\\w+/g,'\\\\w+')}$`); if (!match && reg.test(key)) match = route; } return super.get(match); } } const routesMap = new RouteMap(); routesMap.set('/countries/:id', 'just id') routesMap.set('/countries/:countryId/comments/:id', 'id and country') console.log(routesMap.get('/countries/:id')); console.log(routesMap.get('/countries/1')); console.log(routesMap.get('/countries/:countryId/comments/:id')); console.log(routesMap.get('/countries/1/comments/20'));

But might need further work to become more flexible, performant and handle edge cases like trailing / etc.