React-Router

1、React-Router是什么？

它是react体系的一个重要部分，它通过管理URL,实现组件的切换和状态的变化，开发负责的应用几乎都会用到。

2、React-Router的基本用法

2.1、安装:  cnpm  install react-router;

2.2、router和route的关系：

          router是react的一个组件，它本身只是一个容器，真正的路由要通过Route组件定义。在写路由的时候要先从react-router,导入所需的组件。

          例如：

图1

说明：

a、首先我们要从react-rooter中将我们要用到的组件导入进来，见图1中的第2行。

b、IndexRoute组件（见图1红色代码部分）

      App组件下有两个子组件，分别为component1和component2组件。当我们访问/路径的时候，会直接加载component1。IndexRoute指定component1是根路由的子组件，即指定默认情况下加载的子组件。

c、IndexRoute组件没有路径参数path。

3、IndexRedirect组件

IndexRedirect组件用于访问根路由的时候，将用户重定向到某个子组件。

<Route path="/" component={App}>

       <IndexRedirect  to="./component1"/>

       <Route  path="component1"  component={component1} />

       <Route  path="component2"  component={component2} />

</Route>

代码中，用户访问根路径时，将自动重定向到子组件component1。

4、Link组件

Link组件用于取代<a>元素，生成一个链接，允许用户点击后跳转到另一个路由。它基本上是<a>元素的React版本，可以接收Router的状态。

render(){

   return

<div>

          <ul role="nav">

               <li><link to="/component1">Component1</link></li>

               <li><link to="/component2">Component2</link></li>

         </ul>

</div>

  }