前言
react-router升级到4之后,跟前面版本比有了很大的差别。
例如包的拆分,动态路由等详细的差别就不说了,各位大神的总结也很到位,详细可以点击看看,All About React Router 4这篇文章。
此外还有个差别是路由规则的变化。 一直有着上个版本的习惯,所以稍微复杂的路由,配起来的时候简直痛不欲生。
痛定思痛,要好好了解下其依赖的匹配规则,即path-to-regexp。
本文期望读者是对react-router有过使用的同学,不然本文省略了太多东西,可能看起来可能有点太乱。
path-to-regexp 是什么
其文档一句话介绍很简洁明了: 将路径字符串(如/user/:name)转换为正则表达式。react-router matchPath就是基于其来匹配了。
使用
1 | var pathToRegexp = require('path-to-regexp') |
参数:
- path: 字符串、字符串数组、正则表达式
- keys 可选 由在path里找到的key组成的数组
- options 可选 由下面几部分组成:
- 敏感匹配 默认false,当为true时,正则将区分大小写
- 严格模式 默认false 为true,将会匹配可选的紧跟的分隔符
- end 默认true 正则是否匹配至字符串结尾
- start 默认true 是否从字符串开始进行匹配
- 高阶选项(用于非路径名称字符串,例如主机名称hostname)
- 分隔符 默认每段的分隔符是’/‘
- 结尾字符 可选字段或字段列表、用于作为结束字符
- 分隔符列表 解析时要当做分隔符考虑的字段列表 默认‘./’
还是直接看官方例子吧
1 | // 匹配的path中关键字,得到由其组成的数组 |
这样看起来应该清楚一下,下面继续看使用规则
规则
最简单的例子(结合react-router-config 路由最简单的路由可以如下, 各字段含义就不提了,本文只关注匹配规则):
1 | const routes = [ |
看起来也不过尔尔,简单匹配就完了,但是如果要是有比较复杂的路径的话,例如有这么一个路径:’/a/1/3.html’ 其实/1/3都是可以省略的也是可选的,也就是说如下面这样:
1 | '/a/1/3.html' |
先不要急着写,这种当然是要有按照相应规则来匹配了,先看下对应规则:
参数
路径参数将会被用来定义参数和匹配关键字列表(即我们的keys)
命名参数
命名参数通过如下形式定义: 在参数前面加上引号,例如:‘:foo’。默认情况下,在path的该区域结束之前的部分都会被匹配到(默认的话也就是两个//之间为一个区域,例如/:foo/,那么:foo 部分就是一个区域(segment))。
1 | var re = pathToRegexp('/:foo/:bar') |
参数修饰符
可选
参数后缀可以加上一个可选标识即’?’,表明该参数可选,这样情况下该部分参数如果没有也不正确匹配,只不过在匹配结果里值为undefined
1 | var re = pathToRegexp('/:foo/:bar?') |
0-n
当然参数可以以*结尾,标识该部分参数0-n(可以类比正则)。每个匹配都会将前缀(/)考虑进去,即/已经不是默认的区块分割了,这也是跟?的区别。看例子比较清晰
1 | var re = pathToRegexp('/:foo*') |
对比下?修饰符,应该比较清楚了。
1 | var re = pathToRegexp('/:foo?') |
1-n
参数以+结尾时,表明该部分参数至少为1,同样会将分隔符计算进来。可以对比下上面与*的区别
1 | var re = pathToRegexp('/:foo+') |
自定义匹配参数
所有的参数都可以提供自定义的匹配规则,来覆盖默认规则([^\/]+),如下匹配数字的例子:
1 | // 这里自定的规则就是我们的数字匹配了(\d+) |
注意:自定义规则中反斜杠()前面需要再加一个反斜杠,例如上线的例子(\d+)(这里跟正则不太一致,记得别混淆)
未命名参数
未命名的参数当然也是可行的,即只包含修饰符的群组。和命名参数的功能一样,只不过其name不是对应的key而是数字下标
1 | // 第二个区块,匹配的是所有字符.*,显然是未命名的 |
是不是感觉日了那什么,有这么复杂吗,来我们仔细看看有没有这么复杂。
- /a是固定的,可以不变,第一部分确定。
- 后面这个1对应num1,且可选 /a/:num1?
- 3对应num2,同样可选 /a/:num1?/:num2?.html
看起来应该是这样。那么来试一试吧。
1 | var re = pathToRegexp('/a/:num1?/:num2?.html') |
这里的问题就在于连续两个可选参数的情况下,单纯的使用?就不满足了。
按照上面的表达式,匹配的应该是第一个参数可选,但只有一个参数时,4.html连着一起,认为是num2的value了。
上面的表达式转换为正则之后如下,有兴趣可以研究下:
这里的4.html命中的是后面的([^\/]+?)?.html(?:\/)?$
1 | /^\/a(?:\/([^\/]+?))?\/([^\/]+?)?\.html(?:\/)?$/i |
这样总算满足需求了。
方法
有以下这么几个,这里就不详细介绍了。
- Parse 返回一个字符串和keys的数组。
- Compile (“Reverse” Path-To-RegExp) 将字符串转换为有效路径。
- 其他的参考官网
结束语
到这里关于react-router V4 路由规则部分的解析就结束了。起因也是自己在配置路由时有点懵,不想就那样跟着别人的路由配完就完了。知其然也要知其所以然,应该是我们技术人员一直秉承的一个态度,所以自己总结了一下,抛砖引玉,以供自己记忆和有需要的同学参考。
更多我的博客请移步