1、Router组件
1) history属性
用于监听浏览器地址栏的变化,并将URL解析成一个地址对象,供 React Router 匹配。
history属性可以设置三种值:
A. browserHistory
浏览器的路由就不再通过Hash完成了,而显示正常的路径,背后调用的是浏览器的History API。
History API的参考链接:https://developer.mozilla.org/en-US/docs/Web/API/History
B. hashHistory
路由将通过URL的hash部分(#)切换。
C. createMemoryHistory
主要用于服务器渲染,它创建一个内存中的history对象,不与浏览器URL互动。
说明:官方推荐使用browserHistory,但它需要服务端支持,否则直接向服务器请求某个子路由,会显示网页找不到的404错误。如果只是静态页面,不需要用browserHistory,使用hashHistory即可。
2) location属性
location属性是一个对象,其属性包括:
A. pathname:当前路径,同window.location.pathname。
B. hash:地址栏中#及其之后的内容。在react-router内部注册了onhashchange事件来监听hash的变化。
a) 可以通过window.location.hash属性获取和设置hash值。
b) 设置hash值会触发onhashchange事件。
c) 可以在window上注册onhashchange事件监听器,也可以在body元素上注册。
d) window.location.hash值的变化会直接反应到浏览器地址栏(#后面的部分会发生变化);同时浏览器地址栏的变化也会触发window.location.hash值的变化,从而触发onhashchange事件。
e) 浏览器不会将hash值随请求发送到服务器端。按下enter,浏览器只会发送URL中#之前的部分对应的请求至服务器,请求完毕之后设置hash值为#及其之后的内容,进而触发onhashchange事件;若只改变URL的hash部分,按下enter,浏览器不会发送任何请求至服务器,只是设置hash值,并触发onhashchange事件。
f) <a>标签通过href设置为页面的某元素#id来实现锚链接,点击该链接时,页面跳转至该id元素所在的区域,同时浏览器自动设置window.location.hash属性,同时浏览器地址栏发生改变,并触发onhashchange事件。
C. search:URL中?及其之后的参数部分。
D. state:一个捆绑在该URL上的对象。
E. action:location 类型,PUSH、POP或REPLACE。点击 Link 时为PUSH,浏览器前进后退时为 POP,调用 replaceState 方法时为 REPLACE。
F. key:唯一ID用于操作 sessionStorage 存取 state 对象。
G. query:URL中的参数键值对。
3) params属性
通过params.paramName(paramName由通配符定义的名字而定)从url中读取Route组件的path属性值中的:paramName通配符匹配的部分。
2、Route组件
Router组件本身只是一个容器,真正的路由要通过Route组件定义。
1) path属性
指定路径。
A. 相对路径与绝对路径
绝对路径:以/开头
相对路径:不以/开头,匹配时相对于父组件的路径。
B. 通配符
a) :paramName:匹配URL的一部分,直到遇到下一个/、?、#为止。
b) (): URL的该部分可选。
c) *:匹配任意字符,直到下一个字符为止。匹配方式是非贪婪模式。
d) **:匹配任意字符,直到下一个/、?、#为止。匹配方式是贪婪模式。
C. 最长匹配原则
若有多个路由规则匹配,则最长的路由规则生效。
D. 若有多个相同的路由规则,会匹配第一个,后面的路由规则无效。
一个小技巧:带通配符的路径最好写在路由规则的底部。
2) component属性
指定该路径使用的组件。
3、IndexRoute组件
显式指定根路由的子组件,即指定默认情况下加载的子组件。若不设置IndexRoute,则访问根路径/时,不会加载任何子组件,this.props.children是undefined。
注意:IndexRoute组件没有路径参数path。
4、Redirect组件
用于路由的跳转,即访问一个路由,会自动跳转到另一个路由。
Redirect组件的from和to参数,分别指定源路由和目的路由。
5、IndexRedirect组件
用于访问根路由时,重定向到某个子组件。
6、Link组件
用于取代<a>元素,生成一个链接,点击后跳转到另一个路由。可以说是<a>元素的React 版本,可以接收Router的状态。
Link组件的to属性指定目的路由。
Link组件的activeStyle属性直接设置当前路由的样式。
Link组件的activeClassName属性设置当前路由的样式class。
7、IndexLink组件
若链接到根路由/,不要使用Link组件,而要使用IndexLink组件,因为对于根路由/会匹配任何子路由,导致activeStyle和activeClassName总是生效,而IndexLink组件会使用路径的精确匹配。
若一定要使用Link组件,需要加上onlyActiveOnIndex属性(onlyActiveOnIndex={true})。也就是说,IndexLink组件就是对Link组件的onlyActiveOnIndex属性的包装。