Route
Route 在整个路由导航中,既定义了路由组件与 URL 路径的关联关系,又定义了路由组件渲染的位置。路由组件在定义时需要指定要渲染的组件和要响应的 URL 路径,其中要渲染的组件可以通过以下三个属性来定义。
component
,接受一个组件。render
,接受一个返回组件的函数。children
,接受一个返回组件的函数,与render不同的是,可以根据当前地址是否匹配来渲染不同的内容。
在 Route 中,对于当前地址的匹配是通过exact
、strict
、sensitive
和path
四个属性来决定的。其中exact
属性表示路由需要完全匹配。例如有给定路由路径/one
,如果设定exact
,则路由对于当前地址/one/two
就不会产生匹配,否则就会匹配。exact
属性通常用于对嵌套路由中的父路由进行标记,防止子路由在渲染时,父路由也一并被渲染出来。strict
则是要求当前地址与给定的路由路径必须完全匹配,例如路由路径中带有末尾的/
,若设定strict
,则只有当前地址也带有末尾的/
时才能匹配。sensitive
则是表示对于当前地址的匹配是否大小写敏感。
属性path
用来设定对当前地址的匹配条件(路由路径)以及路由能够捕获的参数。path
给定的匹配条件可以是正则表达式,但在其中设定命名参数,则必须使用:
字符名称的格式。例如匹配条件/:foo/:bar
中,将拥有两个命名参数:foo
和bar
,而匹配条件/(apple-)?icon-:res($\backslash$d+).png
中,则只具有一个命名参数:res
。命名参数后可以添加一些修饰字符来表示参数是否必需等特性,在参数后添加?
表示参数可选,例如/:foo?
;在参数后添加*
表示参数可以为 0
个或者多个,例如/:foo*
;在参数后添加+
表示参数至少为 1
个,例如/:foo+
;在参数后使用圆括号并搭配正则表达式,可以使参数仅捕获匹配正则表达式的值,例如/:foo($\backslash$d+)
可以匹配/123
,但是对于/abc
则不会匹配。
命名参数可以通过组件的props
对象访问,所有的命名参数都保存在props.match.params
下。
除命名参数外,Route 还可以匹配未命名参数。未命名参数可以使用两种方式进行匹配,一是使用圆括号括起的正则表达式,而是使用*进行宽泛匹配。无论使用哪种未命名参数,参数的捕获都将以数字索引编排提供。
Route 的path
参数可以接受一个字符串匹配条件或者一个匹配条件列表。没有指定path
属性的 Route 将会对所有地址完成匹配,通常用来展示页面不存在等错误提示页面。
除了使用path
进行导航目标匹配以外,还可以使用location
属性来使用一个对象进行更加详细的匹配。如果使用location
属性进行导航目标匹配,则在 Link 导航组件和 Switch 分组组件中,也需要相应的使用location
导航描述对象来进行导航匹配。当前组件的location
属性可以通过组件的props
对象访问。