标签：das message 定向 结束 重定向 使用 param ash dex
路由可以向应用中快速的添加视图和数据流，同时保持页面与URL同步
import {Router ,Route, Link} from ‘react-router‘
class App extends React.Component {
render(){
return (
<div>
<ul >
<li><Link to=‘/about‘>About</Link></li>
<li><Link to=‘/inbox‘>Inbox</Link></li>
</ul>
{this.props.children}
</div>
)}})
//获取URL参数
class Message extends React.Component{
componentDidMount(){
const id = this.props.params.id //来自于路径 ‘/inbox/messages/:id‘
fetchMessage(id,function(err,message){
this.setState({message:message})
})
}
render(){
return(
<div>
<h3>message｛this.props.params.id｝</h3>
</div>
}
React.render((
<Router>
<Route path=‘/‘ component={App}>
<Route path=‘about‘ component={About} />
<Route path=‘inbox‘ component={Inbox}>
<Route path=‘messages/:id component={Message} />
</Route>
</Route>
<Router>
).document.body);
以上获取URL参数方法：
1 id = this.props.params.id 来自父组件路径path＝‘/index/message.:id‘
2 baz= this.props.location.query.bar 访问路径为 /foo?bar=baz 时，获取baz的值
添加首页：IndexRouter 设置默认页面，当App的render中this.props.children还是undefined时显示
<IndexRoute component={Dashboard}/>
简洁的URL：使用绝对路径，无需在URL中添加更多的层级，从而可以使用更简洁
<Route path=‘/messages/:id‘ component={Message}/> 但其可能在动态路由中无法使用
重定向Redirect
<Redirect from=‘message/:id‘ to=‘/message/:id‘/>
当有人点击／inbox/message/5时，会跳到／message/5,以防/inbox/message/5不存在
onEnter和onLeave进入和离开的hook，在页面跳转确认时触发。例如 权限验证，或数据持久保存
onLeave hook 在所有将离开的路由中触发，从最下层的字路由开始到最外层的父路由结束。
onEnter hook从最外层的父路由开始到最下层的字路由结束
例如：从/messages/5跳到/about,hook的执行顺序：/messages/:id的onLeave->/inbox的onLeave->/about的onEnter
路径语法
:paramName 匹配位于/ ? ＃ 之后的URL；称作参数
() 在其内部的内容是可选的
* 匹配任意字符
标签：das message 定向 结束 重定向 使用 param ash dex
原文地址：http://www.cnblogs.com/yxiaoqian/p/6132145.html
