使用 ES6 Maps for react-router，我们如何调整 Map.get？

Question

我用new Map()创建了一个地图来在我的应用程序中存储我的 RR4 配置。

当我得到/countries/1时，我想访问/countries/:id的值

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 以使其更智能地获取我的 react-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'));

但可能需要进一步的工作才能变得更加灵活、高效并处理诸如尾随 / 等边缘情况。