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