React Router 4.0学习

引用

react-router 还是 react-router-dom?
只需引用 react-router-dom 这个包就行了。当然，如果搭配 redux ，你还需要使用 react-router-redux。

组件

一个使用了HTML5 history API的高阶路由组件,保证你的ui界面和url保持同步
组件属性:

• basename: string
  作用：为所有位置添加一个基准URL
  使用场景：假如你需要把页面部署到服务器的二级目录，你可以使用 basename 设置到此目录。

  // 渲染成  

• getUserConfirmation: func
  作用：导航到此页面前执行的函数，默认使用 window.confirm
  使用场景：当需要用户进入页面前执行什么操作时可用，不过一般用到的不多
• forceRefresh: bool
  作用：当浏览器不支持 HTML5 的 history API 时强制刷新页面。
  使用场景：同上。

const supportsHistory = 'pushState' in window.history

-keyLength: number
作用：设置它里面路由的 location.key 的长度。默认是6。（key的作用：点击同一个链接时，每次该路由下的 location.key都会改变，可以通过 key 的变化来刷新页面。）
使用场景：按需设置。

• children: node
  作用：渲染唯一子元素。
  使用场景：作为一个 Reac t组件，天生自带 children 属性。

Hash history 不支持 location.key 和 location.state。另外由于该技术只是用来支持旧版浏览器，因此更推荐大家使用 BrowserRouter，此API不再作多余介绍。

基本的职责就是当页面的访问地址与 Route 上的 path 匹配时，就渲染出对应的 UI 界面。
自带三个 render method 和三个 props
render methods 分别是：

• 
  每种 render method 都有不同的应用场景，同一个 应该只使用一种 render method ，大部分情况下你将使用 component
  props 分别是
• math
• location
• histroy
  所有的 render method 无一例外都将被传入这些 props。
• exact: bool
  如果为 true，path 为 '/one' 的路由将不能匹配 '/one/two'，反之，亦然。
• strict: bool
  对路径末尾斜杠的匹配。如果为 true。path 为 '/one/' 将不能匹配 '/one' 但可以匹配 '/one/two'。

to: string
to: Object
replace: bool

是的特殊版,为页面导航准备用的

• activeClassName: string
  导航选中激活时候应用的样式名,默认为active
• activeStyle: object
  不用class直接写style
• exact : bool
  若为true,只有当访问地址严格匹配时激活样式才会应用
• strict : bool
  若为true,只有当访问地址后缀斜杠严格匹配（有或无）时激活样式才会应用
• isActive: func
  决定导航是否激活，或者在导航激活时候做点别的事情。不管怎样，它不能决定对应页面是否可以渲染

只渲染出第一个与当前访问地址匹配的或

  // 这里每次只匹配一个路由
  
  

- children: node
 下的子节点只能是  或  元素。只有与当前访问地址匹配的第一个子节点才会被渲染, 元素用它们的 path 属性匹配， 元素使用它们的 from 属性匹配。如果没有对应的 path 或 from，那么它们将匹配任何当前访问地址

渲染时将导航到一个新地址，这个新地址覆盖在访问历史信息里面的本该访问的那个地址。

• to: string
  重定向的 URL 字符串
• to: object
  重定向的 location 对象
• push: bool
  若为真，重定向操作将会把新地址加入到访问历史记录里面，并且无法回退到前面的页面。
• from: string
  需要匹配的将要被重定向路径。

当用户离开当前页面做出一些提示

• message: string
  当用户离开当前页面时, 设置的提示信息

• message: func
  当用户离开当前页面时,设置的回调函数

 (
  `Are you sue you want to go to ${location.pathname}?` 
)} />

• when: bool
  通过设置一定条件要决定是否启用prompt

对象和方法

history

histoty 是 RR4 的两大重要依赖之一（另一个当然是 React 了）

• length: number 浏览历史堆栈中的条目数
• action: string 路由跳转到当前页面执行的动作，分为 PUSH, REPLACE, POP
• location: object 当前访问地址信息组成的对象，具有如下属性
  pathname: string URL路径
  search: string URL中查询字符串
  hash: string URL的hash片段
  state: string string 例如执行 push(path, state) 操作时，location 的 state 将被提供到堆栈信息里，state 只有在 browser 和 memory history 有效
• push(path, [state]) 在历史堆栈信息里加入一个新条目。
• replace(path, [state]) 在历史堆栈信息里替换掉当前的条目
• goBack()
• goForward()
• go(n)
• block(prompt) 阻止跳转
  history 对象是可变的，因为建议从 的 prop 里来获取 location，而不是从 history.location 直接获取

const location= this.props.loaction

location
location 是指你当前的位置，将要去的位置，或是之前所在的位置
在以下情境中可以获取 location 对象

• 在 Route component 中，以 this.props.location 获取
• 在 Route render 中，以 ({location}) => () 方式获取
• 在 Route children 中，以 ({location}) => () 方式获取
• 在 withRouter 中，以 this.props.location 的方式获取
  location 对象不会发生改变，因此可以在生命周期的回调函数中使用 location 对象来查看当前页面的访问地址是否发生改变。这种技巧在获取远程数据以及使用动画时非常有用

componentWillReceiveProps(nextProps) {
  if (nextProps.location !== this.props.location) {
    // 已经跳转了！
  }
}

match
match 对象包含了 如何与 URL 匹配的信息，具有以下属性：

• params: object 路径参数 ,通过解析URL中的动态部分获得键值对
• isExact: bool 为true时, 真个URL都需要匹配
• path: string用来匹配的路径模式,用于创建嵌套的
• url: string URL匹配的部分, 用于嵌套
  在以下情境中可以获取 match 对象
• 在 Route component 中，以 this.props.match获取
• 在 Route render 中，以 ({match}) => () 方式获取
• 在 Route children 中，以 ({match}) => () 方式获取
• 在 withRouter 中，以 this.props.match的方式获取

当一个 Route 没有 path 时，它会匹配一切路径。

---

文章参考:https://www.jianshu.com/p/e3adc9b5f75c/作者：minooo