react router 学习总结
2015-09-14 19:21
801 查看
1.Router的嵌套及格式,子Route是嵌套在父Route里面的
2.如何获取route中的参数,在route中设定参数后,可以用this.props.params参数名获取参数
3.route中设置默认的子组件,如果path刚刚match到父组件,子组件也会呈现出来。
4.如果自组件使用了绝对路径,那么可以通过绝对路径访问到自组件,但同时也会渲染它的父组件。
urlcomponent
/messages/:idApp->Inbox->Message
5.urlRedirect.当你改变一个组件的path时,会导致其他组件链接到该组件的url失效(url都变了不可能不失效啊),那么Redirect是你最好的选择
6.path语法
:跟在/,#,?后面,表示一个参数/hello/11就是参数
?跟在url后面,表示这部分是可选的
*匹配所有的字符直到遇到第一个*号后面的字符(非贪婪模式),如果*后面没有字符,那么就匹配到url末尾。例如/file/*.png会匹配/file/1.png但不会匹配 /file/1.png/1.png
7.注意:不要使得一个path会被两个兄弟route匹配到,不要像下面这样做
8history
history的使用:注意默认是createHashHistory。
9.routerWillLeave,当使用了这个钩子时,每当离开这个route时,routerWillLeave就会被调用,你可以直接returnfalse;来取消退出,或者return一段消息提示来让用户选择是否退出。对应的js事件是onbeforeunload事件。
如果组件是多层嵌套的话,需要加上RouteContext.
10.componentlifecycle在route地址迁移时引发的react的周期事件,非常重要。,地址:https://github.com/rackt/react-router/blob/master/docs/advanced/ComponentLifecycle.md
<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
相关文章推荐
- ReactiveCocoa的导入
- 【iOS开发】ReactiveCocoa配置
- 酷炫的react.js
- ReactJS实践(一)—— FrozenUI React化之Loading组件
- react-利用Atom搭建开发环境
- spring reactor多线程配置
- spring reactor多线程配置
- ReactJS入门(四)—— 组件API
- react-router
- 整理了一份React-Native学习指南
- react-基础(2)
- react-基础(1)
- CocoaPods的安装与使用,以及添加ReactiveCocoa
- ReactiveCocoa的举例
- React 编码
- Python中reactor,factory,protocol
- [React] Intro to inline styles in React components
- ReactJS State
- ReactJS Properties 简介
- ReactiveX--响应式编程