摘要：该手册是基于和使用教程学习编写而成，可能会有描述不够清楚的地方，大家可自行参考原文，为提供了一个完整的路由库，它允许你通过的变化来控制组件的切换与变化有关全家桶的其余相关文章，可以查看以下链接，会持续更新别眨眼看安装使用进行安装之后

该手册是基于react-router 和 React Router 使用教程 学习编写而成，可能会有描述不够清楚的地方，大家可自行参考原文，

React Router 为 React 提供了一个完整的路由库，它允许你通过 URl 的变化来控制组件的切换与变化

有关 React 全家桶的其余相关文章，可以查看以下链接，会持续更新

别眨眼看 React

使用 npm 进行安装：

npm install --save react-router

之后在需要用到的地方进行引用，

// 需要用到 ES6 编译器，比如 babel
import { Router, Route, Link } from "react-router"

// 不需要使用编译器
var Router = require("react-router").Router
var Route = require("react-router").Route
var Link = require("react-router").Link

当然也可以使用 script 标签进行引用：

之后可以通过 window.ReactRouter 进行调用

当我们想要实现类似信息系统的界面，进入到收件箱选择查看具体信息 1234 的时候，界面路由如下：

path: /inbox/messages/1234

+---------+------------+------------------------+
| About   |    Inbox   |                        |
+---------+            +------------------------+
| Compose    Reply    Reply All    Archive      |
+-----------------------------------------------+
|Movie tomorrow|                                |
+--------------+   Subject: TPS Report          |
|TPS Report        From:    boss@big.co         |
+--------------+                                |
|New Pull Reque|   So ...                       |
+--------------+                                |
|...           |                                |
+--------------+--------------------------------+

应该实现以下几种路由：

// 省略部分组件定义
const App = React.createClass({
  render() {
    return (
      

        
App
        {/* 使用 `` 标签进行路由跳转 */}
        

          
About
          
Inbox
        
        {this.props.children}
      
    )
  }
})

const About = ...;
const Home = ...;

const Inbox = (props) => {
  return (
    

       
Inbox
       {props.children}
     
  )
}
const IndexStatus = ...;
const Message = ...;

//  是一个 React 组件
//  同时也是  的一个容器，路由规则使用  进行定义
render((
  
    
      {/*
        当我们访问 `/` 的时候不会有加载任何子组件，组件 `` 的 `this.props.children`为 `undefined`，
        所以我们使用 ``  来指定默认加载的子组件
      */}
      
      
      
        
        { /* 匹配 `/index/messages/123` 路由*/ }
        
        { /* 当然我们可以直接匹配 `messages/123`，但不破坏路由组件结构 */}
        
          
        
      
    
  
), document.body)

一个路由由三个属性来决定它是否能匹配上 URL:

嵌套结构

Path 属性

优先级

当一个 URL 被调用，React Router 允许你通过嵌套路由 (Nested routes) 的方式来声明将要被渲染的一系列嵌套组件，嵌套路由是类树状结构 (tree-like structure)，React Router 通过 route config 的顺序去匹配 URL

RouteConfig 是 React Router 内部用来指定 router 顺序的数组

:paramName，匹配 URL 的一个部分，直到遇到下一个/、?、#

()，表示URL的这个部分是可选的

*，匹配任意字符(非贪婪模式)，直到模式里面的下一个字符为

**，匹配任意字符(贪婪模式)，直到下一个/、?、#为止

贪婪模式：在整个表达式匹配成功的前提下，尽可能少的匹配
非贪婪模式：在整个表达式匹配成功的前提下，尽可能多的匹配

         // 匹配 /hello/michael 和 /hello/ryan
       // 匹配 /hello, /hello/michael, 和 /hello/ryan
           // 匹配 /files/hello.jpg 和 /files/hello.html
            // 匹配 /files/hello.jpg 和 /files/path/to/file.jpg

React Router 是通过从上到下的顺序匹配路由的，所以应该尽量保证同级路由的第一个路由不会匹配上所有可能的 Path，例如：

  
 // 这一条路由规则是不会执行的，以为上一条路由已经匹配了所有路径为 `/comments`

React Router 构建于 history，简而言之，React Router history 属性用于监听浏览器地址栏的变化，
并将 URL 解析后放入进 location 对象中，给 React Router 提供匹配，

我们使用如下方式从 React Router Package 中引用，

import { browserHistory } from "react-router"

然后在 中使用，

render(
  ,
  document.getElementById("app")
)

有三种 history 属性类型：

browserHistory

Browser history 是通过 URL 变化来改变路由的，它是背后调用的是浏览器的 History，

但是，使用 Browser history 是需要配置你的服务器

hashHistory

Hash history 使用哈希符 (#) 作为 URL 的一部分，路由通过哈希符的部分进行切换，URL 的形式类似于，example.com/#/some/path，

我该使用 hashHistory 么？

Hash history 不需要你配置服务器即可使用，当你刚刚开始使用 React Router 的时候，就是用它吧，但是一般来说，生产环境下的 web 应用应该使用 browserHistory 来保持 URLs 的整洁度，并且 hashHistory 是不支持服务端渲染的

实际使用当中，我们会发现具体的 URL 可能为 example.com/#/some/path?_k=ckuvup，

所以 ?_k=ckuvup 是垃圾代码什么 ？

当我们使用 web 应用的时候，浏览器记录 (history) 通过 push 或者 replace 来产生变换，浏览器记录会存储一个地址状态 (location state)，但并不会体现在 URL 中，

相关的 API 可以参考 History

而在 DOM API 中，改变 Hash history 的方式仅仅是通过 window.location.hash = newHash，这并没有办法保存地址状态，但是我们希望所有的历史记录都能够使用地址状态，所以我们为每一个地址产生一个独一无二的键值用以表示地址状态，当我们在浏览器中点击后退或者前进的时候，我们就有办法来之前的地址状态了

createMemoryHistory

Memory history 并不会从地址栏中操作或是读取，它能够帮助我们完成服务器端的渲染，或者用于测试以及其他渲染环境 (比如 React Native)，和其他两种方式不一样的是，我们需要在内存中创建 history 对象来使用，

const history = createMemoryHistory(loaction)

考虑以下代码，

当我们访问 / 的时候不会有加载任何子组件，组件 的this.props.children 为 undefined，

当然你可以使用 {this.props.children || } 来定义渲染默认组件，

但 Home 并没有出现在路由当中，所以这样写并不是非常直观，因此可以使用 来指定当指定子组件不存在时加载默认的子组件，

我们可以使用 组件来定义从一个路由自动跳转至另一个路由，

  {/* 从 /inbox/messages/:id 跳转到 /messages/:id */}
  ＜Redirect from="messages/:id" to="/messages/:id" />

考虑以下代码，

当我们希望访问 / 的时候自动跳转至 welcome ，即当我们访问跟路由 / 的时候从定向为其他组件，我们可以使用 组件，

当我们想点击一个链接跳转至根路由 / ， 也许我们会这么写

Home

实际上它会匹配任何以 / 开始的子路由，

当我们只希望渲染 Home 相关的组件， 我们应该这么写

Home

路由组件 (Route) 都拥有 onEnter 和 onLeave 钩子，当一个路由被触发时，进入该路由时触发 onEnter ，离开该路由时触发 onLeave，这两个钩子非常的有用，比如当进入一个路由时，需要先判断时候授权，就会可以使用 onEnter，

在路由跳转过程中，onLeave hook 会在所有将离开的路由中触发，从最下层的子路由开始直到最外层父路由结束，然后 onEnter hook会从最外层的父路由开始直到最下层子路由结束，

回到概述中的例子，如果我们的路由从 /messages/5 跳转到 /about，下面是这些 hook 的执行顺序：

/messages/:id 的 onLeave

/inbox 的 onLeave

/about 的 onEnter

至此基础篇完结，之后我会给大家带来进阶篇，欢迎大家持续关注，

同时如果文章中有任何错误，欢迎大家指出，好的文章需要你的支持，谢谢