• 17-7-26-react-router入门


    完蛋了,上司最近都和颜悦色的,搞得我跑路的决心大大减退,不过还是要跑路。毕竟面向工资编程。今天一天基本都在挑项目的CSS,由于是别人哪里直接copy的,然后css我也直接copy的codepen上的源码,忘记编译一下,导致搞了半天的时间再调样式。然后剩余时间学了会儿react-router。


    1. react-router用url来进行判断,提供react组件但是不刷新整个页面,加载很迅速。
    2. 首先引入三大类 `import {hashHistory, Router, Route} from 'react-router'`,其中hashHistory用来在url的后部增加一些hash数据, Router是最外面一层, Route是Router的组件,可以拿来互相嵌套。
    3. 最外层`<Router history={hashHistory}> .... </Router>`
    4. 里面一层 `<Route component={Index} path="/"> ... </Route>`,其中Index是React写好的单独组件,在访问path属性的url时,会显示出该组件。
    5. 嵌套Route`<Route component={Index} path="/"><Route component={ListDetail} path="details"></Route></Route>`,在Index页面中需要写`{this.props.childern}`,Index和ListDetial都是单独写好的组件,在访问/#/details时,会显示Index和ListDetial的嵌套页面,ListDetail的位置出现在刚才写的this.props.childern出现的位置。
    6. 嵌套url传值,`<Route component={ComponentList} path="/list/:id"></Route>`,在list页面中写`{this.props.params.id}`,就能获得url中的id部位。比如访问http://localhost:8080/#/list/12341111,id就等于12341111,可以直接显示。

    以上,感谢阅读。

  • 相关阅读:
    2019.10.07题解
    2019.10.06题解
    2019.10.05'题解
    2019.10.05题解
    java邮件发送
    注释类型 XmlType
    Spring 注解
    @SuppressWarnings(unchecked)作用解释
    vm文件
    Apache Shiro 使用手册(一)Shiro架构介绍
  • 原文地址:https://www.cnblogs.com/by330326/p/7242541.html
Copyright © 2020-2023  润新知