浅谈React Router入门

短命女 2022-06-15 04:14 301阅读 0赞

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属性

指定路径。