Используя ES6 Maps для реакции-маршрутизатора, как мы можем настроить Map.get?

Question

Я создал карту с new Map() для хранения моей конфигурации RR4 в моем приложении.

Я хочу получить доступ к значениям /countries/:id, когда получу /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')

Создав класс из Map, как я могу настроить get, чтобы он стал более интеллектуальным, чтобы получить мой путь response-router-dom?

Answer 1

Простая попытка будет выглядеть примерно так:

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

Но, возможно, потребуется дополнительная работа, чтобы стать более гибкой, производительной и обрабатывать крайние случаи, такие как трейлинг / и т. Д.