react-router

来源：互联网发布：青岛知豆 6000一年编辑：程序博客网时间：2024/06/05 12:44

摘自：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');

0 0