关于javascript:在React Router中使用正则表达式Route Path prop

Using regex in react router Route path prop

我正在通过使用正则表达式而不是react-router路径prop

中的字符串将页面路由到404

我所拥有的是以下格式的不同路线的列表:

示例定义

路线1

1
2
const withdrawRuote = 'user/:userId/withdraw'
const depositRoute = 'user/:userId/deposit'

路线2

1
2
3
const groupNewRoute = 'group/new'
const groupWithdrawRoute = 'group/withdraw'
const groupDepositRoute = 'group/deposit'

react-router路由路径正则表达式

对于路线1

1
Route(exact path=myRegex1 render=404)

这是myRegex1

使用上述正则表达式,应通过以下操作:

  • / user / 123 / withdrawaaaaa
  • / user / 123 / depositaaaaaa

应该失败

  • / user / 123 /提现
  • / user / 123 / deposit /
  • / user / 123 /提现
  • / user / 123 / deposit /
  • /用户
  • /用户/

对于Route2

1
Route(exact path=myRegex2 render=404)

这里是myRegex2。
这些应该通过:

  • / group /未找到
  • / group /不

应该失败

  • /团体/
  • /团体
  • / group /存款
  • / group /提现

我知道我可以使用switch语句处理404,但是我需要知道为什么这不起作用。

如何使正则表达式知道我需要deposit一词


您需要告诉正则表达式引擎,您只想避免在结尾处匹配withdrawdeposit的URL:

1
2
^\\/user\\/?[0-9]+\\/(?!(?:deposit|withdraw)\\/?$).*$
                                         ^^^^

请参阅正则表达式演示

(?!(?:deposit|withdraw)\\/?$)否定前瞻一旦匹配(在当前位置的右侧)将使匹配失败:

  • (?:deposit|withdraw)-两个值depositwithdraw之一
  • \\/?-一或零(可选)/字符
  • $-字符串的结尾。