Question

我正在创建一个函数，用于检查当前url是否与我想要的格式完全匹配。

如果当前URL是可接受的URL列表的一部分，我想“批量检查”。

我设法用REGEX做到了：

  const validateOpinionPath = (currentUrl: string): boolean => {

    const regexPatter = /opinion\/[0-9a-z-]*\/(large|medium|small)$/g
    const matchResult = currentUrl.match(regexPatter)
    return !!matchResult
  }

但是我想知道如何使用matchPath（或react-router-dom提供的任何其他功能）来做到这一点。

我尝试了以下操作，但它仅与第一个网址匹配：

  const validateOpinionPath = (currentUrl: string): boolean => {
    const match = matchPath(currentUrl, {
      path:
        '/option/:opinionId/large' ||
        '/option/:opinionId/medium' ||
        '/opinion/:opinionId/small',
      exact: true,
      strict: false
    })

    return !!match
  }

我想完全匹配这些路线：

 '/option/:opinionId/large',
 '/option/:opinionId/medium',
 '/opinion/:opinionId/small'

'/option/:opinionId/large/something'应该返回false

Answer 1

之所以为什么用||分隔符分隔的多个字符串不起作用，是因为如果第一个字符串是伪造的值（例如空），则只会选择第二个字符串作为path属性的值字符串。

因为在您的情况下，第一个字符串不是伪造的值，所以path属性的值始终是第一个字符串，即'/option/:opinionId/large'。

解决方案

您可以在传递给path的options对象中传递字符串数组作为matchPath()属性值。这样，将检查每个路径，而不仅仅是第一个。

const match = matchPath(currentUrl, {
  path: [
     '/option/:opinionId/large',
     '/option/:opinionId/medium',
     '/opinion/:opinionId/small'
  ],
  exact: true,
  strict: false
})

Answer 2

我希望这会成功！

    const validateOpinionPath = (currentUrl: string): boolean => {
      const match = matchPath(currentUrl, {
        path: '/option/:opinionId/*'
        exact: true,
        strict: false
      })
      return !!match
    }

Answer 3

反应路由器dom使用path-to-regexp。

您的路径可以是：

/option/:optionId/(small|medium|large)

匹配多个确切路线

3 个答案:

解决方案