Route

Route 在整个路由导航中,既定义了路由组件与 URL 路径的关联关系,又定义了路由组件渲染的位置。路由组件在定义时需要指定要渲染的组件和要响应的 URL 路径,其中要渲染的组件可以通过以下三个属性来定义。

  • component,接受一个组件。
  • render,接受一个返回组件的函数。
  • children,接受一个返回组件的函数,与render不同的是,可以根据当前地址是否匹配来渲染不同的内容。

在 Route 中,对于当前地址的匹配是通过exactstrictsensitivepath四个属性来决定的。其中exact属性表示路由需要完全匹配。例如有给定路由路径/one,如果设定exact,则路由对于当前地址/one/two就不会产生匹配,否则就会匹配。exact属性通常用于对嵌套路由中的父路由进行标记,防止子路由在渲染时,父路由也一并被渲染出来。strict则是要求当前地址与给定的路由路径必须完全匹配,例如路由路径中带有末尾的/,若设定strict,则只有当前地址也带有末尾的/时才能匹配。sensitive则是表示对于当前地址的匹配是否大小写敏感。

属性path用来设定对当前地址的匹配条件(路由路径)以及路由能够捕获的参数。path给定的匹配条件可以是正则表达式,但在其中设定命名参数,则必须使用:字符名称的格式。例如匹配条件/:foo/:bar中,将拥有两个命名参数:foobar,而匹配条件/(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对象访问。