React系列之Router路由的使用

React Router路由的使用
1、路由
2、嵌套路由
3、path属性
4、path属性使用通配符

<Route path="/repos/:userName/:repoName" component={Repo}/>
path="/repos(/:name)"
path="/repos/."
path="/repos/*"
path="/repos/*.jpg"

使用通配符的路由要写在路由规则的底部，防止同时匹配到两个规则第二个规则不生效！

5、IndexRoute组件
使用<IndexRoute component={Home} />可以显式指定Home是根路由的子组件，即指定默认情况下加载的子组件，
本身的展示内容由Home组件定义

6、Redirect重定向组件 用于路由的跳转
例如，访问"/home/mylist/:id" 会自动跳转到"/mylist/:id"

<Route path="home" component="{Home}">
    <Redirect from="mylist/:id" to="/mylist/:id" />
</Route>

7、IndexRedirect组件
访问跟路由时 用户重定向到Welcome组件

<Route path="/" component={App}>
  <IndexRedirect to="/welcome" />
  <Route path="welcome" component={Welcome} />
</Route>

8、Link组件

<Link to="/about" activeStyle={{color: 'red'}}>About</Link>
<Link to="/about" activeClassName="active">About</Link>

9、IndexLink组件
10、history属性
hashHistory 通过URL的hash部分（#）切换
browserHistory 调用浏览器的History API，此时开发服务器可使用webpack-dev-server
createMemoryHistory 主要用于服务器渲染。它创建一个内存中的history对象，不与浏览器URL互动。

参考github上的demo [react-router-tutorial][1]
[1]: https://github.com/i-Gnomo/react-router-tutorial "react-router-tutorial"

---