浅谈React Router入门

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属性的包装。

展开阅读全文
©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值