Typescript useMatch 用于多个模式以在 reactrouterdom 中进行测试

我有以下数组:

const tabsList = [
  { 
    pathPattern: 'users/'
    label: 'Manage users'
  },
  {
    pathPattern: 'users/:id',
    label: 'Edit user profile'
  }
] 

我需要一个从react-router-dom开始的方法来告诉我上面的哪个数组条目与当前路径名匹配.

在此基础上，我将能够在我的组件样式中为活动列表项上色.

我发现方法useMatch()看起来像是做了我想要的，然而，它不接受数组，它只接受一个字符串模式用于比较.

// example: current path is /users/82374023854321
const isAllUsersMatch = useMatch('/users') // null
const isUserIdMatch = useMatch('/users/:id') // { ...PathMatch<string> } 

它可以工作，但不太好，我必须为数组中的每一项创建一个类似的单独变量.

在react-router-dom美元里有没有类似以下的东西？

const tabsList = [
  { 
    pathPattern: 'users/'
    label: 'Manage users'
  },
  {
    pathPattern: 'users/:id',
    label: 'Edit user profile'
  }
] 
const activeListItem = tabsList.some((listItem)=> doesItMatch(listItem.pathPattern))

我会用钩子来做这件事，但在Reaction中，您不能在回调中使用钩子，因此以下代码将不起作用:

// const activeListItem = tabsList.some((listItem)=> doesItMatch(listItem.pathPattern))
const activeListItem = tabsList.some((listItem)=> useMatch(listItem.pathPattern)) // ERROR