表单处理
Link组件用于正常的用户点击跳转,但是有时还需要表单跳转、点击按钮跳转等操作。这些情况怎么跟React Router对接呢?
下面是一个表单。
第一种方法是使用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)
},
})
十二、路由的钩子
每个路由都有Enter和Leave钩子,用户进入或离开该路由时触发。
上面的代码中,如果用户离开/messages/:id,进入/about时,会依次触发以下的钩子。
/messages/:id的onLeave
/inbox的onLeave
/about的onEnter
下面是一个例子,使用onEnter钩子替代组件。
onEnter钩子还可以用来做认证。
const requireAuth = (nextState, replace) => {
if (!auth.isAdmin()) {
// Redirect to Home page if not an Admin
replace({ pathname: ‘/’ })
}
}
export const AdminRoutes = () => {
return (
)
}
下面是一个高级应用,当用户离开一个路径的时候,跳出一个提示框,要求用户确认是否离开。
const Home = withRouter(
React.createClass({
componentDidMount() {
this.props.router.setRouteLeaveHook(
this.props.route,
this.routerWillLeave
)
},
routerWillLeave(nextLocation) {
// 返回 false 会继续停留当前页面,
// 否则,返回一个字符串,会显示给用户,让其自己决定
if (!this.state.isSaved)
return '确认要离开?';
},
})
)
上面代码中,setRouteLeaveHook方法为Leave钩子指定routerWillLeave函数。该方法如果返回false,将阻止路由的切换,否则就返回一个字符串,提示用户决定是否要切换。
(完)