javascript - 在React Router路由路径 Prop 中使用正则表达式

我正在通过使用正则表达式而不是react-router path prop中的字符串将页面路由到404

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

定义示例

路线1

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

路线2

const groupNewRoute = 'group/new'
const groupWithdrawRoute = 'group/withdraw'
const groupDepositRoute = 'group/deposit'

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

对于路线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

Route(exact path=myRegex2 render=404)

这是myRegex2。
这些应该通过：


/ group /未找到
/ group /不


应该失败


/组/
/组
/ group /存款
/ group /提现


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

我如何使正则表达式知道我需要单词deposit和withdraw或user作为单词，而考虑到我要排除它们而不是包括它们，所以不只是一组字符。

最佳答案

您需要告诉正则表达式引擎，您只想避免最后使用withdraw和deposit匹配URL：

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

请参见regex demo

(?!(?:deposit|withdraw)\/?$)否定超前匹配将在匹配后（在当前位置的右边）立即失败：


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