React Router

介绍

React Router是一个基于React之上的强大路由库，可以向应用中快速添加试图和数据流，同事保持页面与URL的同步。详细示例参见官方的示例库

基本用法

路由器Router其实是React的一个容器组件，真正的路由通过Route组件定义

import { Router,Route,hashHistory } from 'react-router';
import App from './app';
import About from './components/about';

render((<Router history={hashHistory}>
    <Route path="/" component = {APP}/>
    <Route path="/about" component = {About}/>
</Router>),document.getElementById('app'));

Router组件有个参数history，其值hasHistory表示，路由的切换由URL的hash变化决定，机URL的#部分发生变化，若用户访问http：www.demo.com/,实际会看到http://www.demo.com/#/

路由匹配原理

路由拥有三个属性来决定是否匹配一个URL：
1. 嵌套关系
2. 路径语法
3. 优先级

嵌套关系

React Router 使用路由嵌套的概念来让定义View的嵌套集合，当一个给定的URL被调用时，整个集合中（命中的部分）都会被渲染。嵌套路由被描述成一种树结构，React Router会深度优先遍历整个路由配置来寻找一个与给定的URL相匹配的路由。

嵌套语法

路由路径是匹配一个（或一部分）URL的一个字符串模式。大部分的路由路径都可以直接按照字面量来理解，除了一些特殊的符号：

1. “：paramName”，匹配一段位于 /、? 或 # 之后的URL，命中的部分被作为一个参数
2. “（）”，在它内部的内容被认为是可选的

3. “*” ，匹配任意字符知道命中下一个字符或者整个URL的末尾，并创建一个splat参数

   // 匹配 /demo/sqliang 和 /demo/ryan
   <Route path="/demo/:name"/> 
   // 匹配 /demo, /demo/sqliang和 /demo/ryan
   <Route path="/demo(/:name)" />
   // 匹配 /files/heloo.jpg 和 /files/path/to/hello.jpg
   <Route path="/files/*.*" />

   注意：如果一个路由使用了相对路径，那么完整的路径将由它的所有祖先路径和自身指定的相对路径拼接而成；使用绝对路径可以使路由匹配行为忽略嵌套关系

优先级

路由算法会根据定义的顺序自顶向下匹配路由。因此，当用油两个兄弟路由节点配置时，必须确认前一个路由不会匹配后一个路由中的路径

常用路由组件和属性

Redirect组件

用于路由的跳转，即用户访问一个路由，自动跳转到另一个路由

<Route path='about' component={About}>
    <Redirect from='meaasges/:id' to='/messages/:id'/>
</Route>

具体常用路由组件参看：阮一峰 React Router 使用教程

更多信息：
知乎专栏 深入理解React-Router 路由系统
阮一峰 React Router使用教程

React Router中文文档