逍遥阁

react-router学习笔记

关键词: react-router

react-router学习笔记

###安装

```
sudo cnpm install -S react-router
```

###react-router导出的常用的接口列表

```
Router
Route
IndexRoute
hashHistory
browserHistory
createMemoryHistory
Link
IndexLink
match
RouterContext
```

###Router组件的调用方法

写法1(这里Route可以嵌套，也可以不嵌套)

```
let routes =
<Route path="/" component={Default}>
    <IndexRoute component={Index}/>
    <Route path="/a" component={A}/>
    <Route path="/b" component={B}/>
</Route>
;
<Router routes={routes} history={hashHistory或browserHistory或createMemoryHistory}/>
```

上面代码中，用户访问`/a`时，会先加载`Default`组件，然后在它的内部再加载`A`组件

写法2

```
<Router history={hashHistory}>
    <Route path="/" component={Default}/>
    <Route path="/a" component={A}/>
    <Route path="/b" component={B}/>
</Router>
```

###Route组件的属性

```
path
component
onEnter
```

###Route组件path属性可以用的通配符

```
:变量 匹配URL的一个部分，可以用`this.props.params.变量`取出
() 表示URL的这个部分是可选的
* 匹配任意字符，匹配方式是非贪婪模式
** 匹配任意字符，匹配方式是贪婪模式
```

###获取get参数值

```
this.props.location.query.变量
```

###IndexRoute组件

显式指定某组件是根路由`/`的子组件

IndexRoute组件没有路径参数path

###Redirect组件

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

```
＜Redirect from="路由" to="路由"/>
```

###IndexRedirect组件

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

```
＜IndexRedirect to="路由"/>
```

###Link组件

用于取代`<a>`元素，生成一个链接，允许用户点击后跳转到另一个路由

```
<Link to="路由" activeStyle={{color: 'red'}} activeClassName="active" onlyActiveOnIndex={true}>文字</Link>
```

###IndexLink组件

用来链接到根路由`/`

```
<IndexLink to="/" activeClassName="active">文字</IndexLink>
```

###browserHistory接口

```
browserHistory.push(路由);
```

admin
2017-02-20 17:38:14
javascript

文章分类

文章标签

文章归档

友情链接

react-router学习笔记