您的位置:首页 > Web前端 > React

react router 学习总结

2015-09-14 19:21 801 查看
1.Router的嵌套及格式,子Route是嵌套在父Route里面的

  

<Router>
<Routepath="/"component={App}>
<Routepath="about"component={About}/>
<Routepath="inbox"component={Inbox}>
{/*Addtheroute,nestedwherewewanttheUItonest*/}
<Routepath="messages/:id"component={Message}/>
</Route>
</Route>
</Router>


2.如何获取route中的参数,在route中设定参数后,可以用this.props.params参数名获取参数

参数设定:<Routepath="showwork/:id"name="showwork"handler={ShowProduction}/>

获取参数:constid=this.props.params.id


3.route中设置默认的子组件,如果path刚刚match到父组件,子组件也会呈现出来。

  

<Routepath="/"component={App}>
{/*Showthedashboardat/*/}
<IndexRoutecomponent={Dashboard}/>
<Routepath="about"component={About}/>
<Routepath="inbox"component={Inbox}>
<Routepath="messages/:id"component={Message}/>
</Route>
</Route>

urlcomponent
/  App->Dashboard



4.如果自组件使用了绝对路径,那么可以通过绝对路径访问到自组件,但同时也会渲染它的父组件。

  

<Router>
<Routepath="/"component={App}>
{/*Showthedashboardat/*/}
<IndexRoutecomponent={Dashboard}/>
<Routepath="about"component={About}/>
<Routepath="inbox"component={Inbox}>
<Routepath="/messages/:id"component={Message}/>
</Route>
</Route>
</Router>

  urlcomponent
/messages/:idApp->Inbox->Message

5.urlRedirect.当你改变一个组件的path时,会导致其他组件链接到该组件的url失效(url都变了不可能不失效啊),那么Redirect是你最好的选择

React.render((
<Router>
<Routepath="/"component={App}>
<IndexRoutecomponent={Dashboard}/>
<Routepath="about"component={About}/>
<Routepath="inbox"component={Inbox}>
<Routepath="/messages/:id"component={Message}/>

{/*Redirect/inbox/messages/:idto/messages/:id*/}
<Redirectfrom="messages/:id"to="/messages/:id"/>
</Route>
</Route>
</Router>
),document.body)


6.path语法

  :跟在/,#,?后面,表示一个参数/hello/11就是参数

  ?跟在url后面,表示这部分是可选的

  *匹配所有的字符直到遇到第一个*号后面的字符(非贪婪模式),如果*后面没有字符,那么就匹配到url末尾。例如/file/*.png会匹配/file/1.png但不会匹配      /file/1.png/1.png

<Routepath="/hello/:name">//matches/hello/michaeland/hello/ryan
<Routepath="/hello/:name?">//matches/hello,/hello/michael,and/hello/ryan
<Routepath="/files/*.*">//matches/files/hello.jpgand/files/path/to/hello.jpg


7.注意:不要使得一个path会被两个兄弟route匹配到,不要像下面这样做

  

<Routepath="/comments".../>
<Redirectfrom="/comments".../>


8history

  
createHashHistory:默认history,但是它使用url的hash(#)部分来创建route,所以整个url看起来像这样。http://www.example.com/#/some/path.注意hash的改变并不会导致页面的刷新。


  
createBrowserHistory:对于浏览器应用来说,browserhistory使用了浏览器内置的historyapi(javascript内的api)  


  
createMemoryHistory


history的使用:注意默认是createHashHistory。

React.render(
<Routerhistory={createBrowserHistory()}>
<Routepath='/'component={App}>
<IndexRoutecomponent={Home}/>
<Routepath='about'component={About}/>
<Routepath='features'component={Features}/>
</Route>
</Router>,
document.getElementById('app')
);


9.routerWillLeave,当使用了这个钩子时,每当离开这个route时,routerWillLeave就会被调用,你可以直接returnfalse;来取消退出,或者return一段消息提示来让用户选择是否退出。对应的js事件是onbeforeunload事件。

import{Lifecycle}from'react-router'

constHome=React.createClass({

//AssumingHomeisaroutecomponent,itmayusethe
//LifecyclemixintogetarouterWillLeavemethod.
mixins:[Lifecycle],

routerWillLeave(nextLocation){
if(!this.state.isSaved)
return'Yourworkisnotsaved!Areyousureyouwanttoleave?'
},

//...

})


  如果组件是多层嵌套的话,需要加上RouteContext.

import{Lifecycle,RouteContext}from'react-router'

constHome=React.createClass({

//Homeshouldprovideitsrouteincontext
//fordescendantsfurtherdownthehierarchy.
mixins:[RouteContext],

render(){
return<NestedForm/>
}

})

constNestedForm=React.createClass({

//DescendantsusetheLifecyclemixintoget
//arouterWillLeavemethod.
mixins:[Lifecycle],

routerWillLeave(nextLocation){
if(!this.state.isSaved)
return'Yourworkisnotsaved!Areyousureyouwanttoleave?'
},

//...

})


10.componentlifecycle在route地址迁移时引发的react的周期事件,非常重要。,地址:https://github.com/rackt/react-router/blob/master/docs/advanced/ComponentLifecycle.md
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: