react-router

摘自：http://www.ruanyifeng.com/blog/2016/05/react_router.html?utm_source=tool.lu

https://github.com/ReactTraining/react-router/blob/master/docs/API.md#link

表单处理

Link

组件用于正常的用户点击跳转，但是有时还需要表单跳转、点击按钮跳转等操作。这些情况怎么跟React Router对接呢？下面是一个表单。

<form onSubmit={this.handleSubmit}>
<input type="text" placeholder="userName"/>
<input type="text" placeholder="repo"/>
<button type="submit">Go</button>
</form>

第一种方法是使用

browserHistory.push

import { browserHistory } from 'react-router'

// ...
handleSubmit(event) {
event.preventDefault()
const userName = event.target.elements[0].value
const repo = event.target.elements[1].value
const path = `/repos/${userName}/${repo}`
browserHistory.push(path)
},

第二种方法是使用

context

对象。

export default React.createClass({

// ask for `router` from context
contextTypes: {
router: React.PropTypes.object
},

handleSubmit(event) {
// ...
this.context.router.push(path)
},
})

如果希望当前的路由与其他路由有不同样式，这时可以使用

Link

组件的

activeStyle

属性。

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

上面代码中，当前页面的链接会红色显示。另一种做法是，使用

activeClassName

指定当前路由的

Class

。

<Link to="/about" activeClassName="active">About</Link><Link to="/repos" activeClassName="active">Repos</Link>

上面代码中，当前页面的链接的

class

会包含

active

。在

Router

组件之外，导航到路由页面，可以使用浏览器的History API，像下面这样写。

import { browserHistory } from 'react-router';browserHistory.push('/some/path');