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,但是我需要知道为什么这不起作用。
如何使正则表达式知道我需要
您需要告诉正则表达式引擎,您只想避免在结尾处匹配
1 2 | ^\\/user\\/?[0-9]+\\/(?!(?:deposit|withdraw)\\/?$).*$ ^^^^ |
请参阅正则表达式演示
-
(?:deposit|withdraw) -两个值deposit 或withdraw 之一 -
\\/? -一或零(可选)/ 字符 -
$ -字符串的结尾。