React-router 小计
2016-06-14 16:18
417 查看
现在对于路由的历史配置基本都是用browserHistory,对于Route 在你进行Link组件切换(切换页面)是,浏览器的url会改变,但实际上没刷新,组件的切换全是route内部做好;
一般url改变后,你如果手动刷新页面,可能会出现找不到页面的情况,这样情况可能的服务器端进行重定位,但用户手动刷新时强制跳转到首页,即如下:的“/React_WeiXin/”
一般配置如下
组件渲染如下
如果跟目录没设置,则不会显示Index组件
注意:对于Route path="/React_WeiXin/" component={Index} 中的component可不进行配置吗,如果配置了,则Index则必须包含{this.props.children},否则路由切换不起效
一般url改变后,你如果手动刷新页面,可能会出现找不到页面的情况,这样情况可能的服务器端进行重定位,但用户手动刷新时强制跳转到首页,即如下:的“/React_WeiXin/”
路由配置相关
路由官方文档做得确实不够,很多重要的细节都没说出来,还自己也是试了一整天一般配置如下
<Router history={browserHistory}> <Route path="/React_WeiXin/" component={Index}> //如果配置了这个组件,这个则会一直显示在你的页面中,可做导航 <IndexRoute component={Welcome}/> <Route path="/React_WeiXin/detail" component={Detail}/> <Route path="/React_WeiXin/test" component={SenconPage}/> <Route path="*" component={NotFound}/> </Route> </Router>
组件渲染如下
URL | 组件 |
/React_WeiXin/ | Index+Welcome |
/React_WeiXin/detail | Index+Detail |
/React_WeiXin/test | Index+SenconPage |
没配置的 | Index+NotFound |
注意:对于Route path="/React_WeiXin/" component={Index} 中的component可不进行配置吗,如果配置了,则Index则必须包含{this.props.children},否则路由切换不起效
class Index extends React.Component{ render(){ return( <div> <p id ="lin_test">Hello world!This is Index</p> <Link to="/React_WeiXin/detail" className="weui_btn weui_btn_warn">Detail</Link> <Link to="/React_WeiXin/test" className="weui_btn weui_btn_warn">第二</Link> <Link to="/React_WeiXin/inbox">Inbox</Link> {this.props.children} </div> ) } }
相关文章推荐
- React-router路由实践
- React Native 开发笔记
- window系统下如何在react native安卓开发中用夜神模拟器
- ReactJS入门指南
- react-native:环境安装
- React-Native开发(三)---仿QQ登录页面
- react-native IDE(nuclide)安装
- Android:ReactNative环境搭建遇到的坑
- react-native不能生成index.android.bundle
- react-native android_home配置问题(android)
- React构建单页应用方法与实例
- React-Native开发(二)-ListView
- react-native遇到的坑,及解决方法
- React Native:从入门到原理
- React Native Bundle 拆包工具之 moles-packer 介绍
- React Native十四:原生模块
- 一小时包教会 —— webpack 入门指南
- 史上最详细Windows版本搭建安装React Native环境配置
- React-native开发系列(一)---NavigatorIOS应用
- React Native 植入原生应用