99 lines
2.3 KiB
Markdown
99 lines
2.3 KiB
Markdown
---
|
||
title: React Router Cheatsheet
|
||
localeTitle: 反应路由器Cheatsheet
|
||
---
|
||
基于[http://ricostacruz.com/cheatsheets/react-router.html，](http://ricostacruz.com/cheatsheets/react-router.html)但针对React Router的v2.0.0进行了更新。
|
||
|
||
## 基本
|
||
```
|
||
import { render } from 'react-dom'
|
||
import { Router, Route, browserHistory } from 'react-router'
|
||
|
||
// Import RootView and NoMatch
|
||
|
||
render((
|
||
<Router history={browserHistory}>
|
||
<Route path="/" component={RootView} />
|
||
<Route path="*" component={PageNotFound} />
|
||
</Router>
|
||
), document.getElementById('app'))
|
||
```
|
||
|
||
## 嵌套
|
||
```
|
||
import React from 'react'
|
||
import { render } from 'react-dom'
|
||
import { Router, Route, browserHistory } from 'react-router'
|
||
|
||
// Import About, Inbox and Messages
|
||
|
||
class Chrome extends React {
|
||
render () {
|
||
return (
|
||
<div>
|
||
<h1>App</h1>
|
||
<a href="/about">About</a>
|
||
<a href="/inbox">Inbox</a>
|
||
<a href="/messages">Messages</a>
|
||
{ this.props.children }
|
||
</div>
|
||
)
|
||
}
|
||
}
|
||
|
||
render((
|
||
<Router history={browserHistory}>
|
||
<Route path="/" component={Chrome}>
|
||
<Route path="about" component={About} />
|
||
<Route path="inbox" component={Inbox} />
|
||
<Route path="messages" component={Messages} />
|
||
</Route>
|
||
</Router>
|
||
), document.getElementById('app'))
|
||
```
|
||
|
||
## 网址参数
|
||
```
|
||
class Message extends React {
|
||
componentDidMount() {
|
||
// from the path `/inbox/messages/:id`
|
||
const id = this.props.params.id
|
||
...
|
||
```
|
||
|
||
## 链接
|
||
```
|
||
import { Link } from 'react-router'
|
||
|
||
/* Nav Component */
|
||
...
|
||
render() {
|
||
...
|
||
const userId = 10;
|
||
|
||
return (
|
||
// Adding params is as simple as appending them to the route
|
||
<Link to={`user/${userId}`}>User 10</Link>
|
||
|
||
// Classes can be added to the link element if the current route is the one they link to
|
||
<Link to="login"
|
||
activeClassName="-active">Login</Link>
|
||
)
|
||
}
|
||
```
|
||
|
||
## 其他配置
|
||
```
|
||
<Route path="/">
|
||
<IndexRoute component={Home} />
|
||
<Route path="*" handler={NotFound} />
|
||
|
||
// arbitrary/url/login -> /arbitrary/url/sessions/new
|
||
<Redirect from="login" to="sessions/new" />
|
||
// arbitrary/url/about/1 -> /arbitrary/url/profile/1
|
||
<Redirect from="about/:id" to="profile/:id" />
|
||
|
||
<Route name="about-user" ... />
|
||
...
|
||
|
||
``` |