react 学习笔记
1.Router
1.1 Histories
React Router 是建立在 history 之上的。一个 history 知道如何去监听浏览器地址栏的变化, 并解析这个 URL 转化为 location 对象, 然后 router 使用它匹配到路由,最后正确地渲染对应的组件。
常用的 history 有三种形式, 但是你也可以使用 React Router 实现自定义的 history。
browserHistory(传统类型的url,调用history api,如果需要使用这种模式,需要在server端,如webpack 加--history-api-fallback)hashHistory (用/#/xx 代表url)createMemoryHistory
1.2 IndexRoute
IndexRoute 代表Route 级别的默认路径,同时,需要包在Route内,目录结构如下:
<Router history={browserHistory}>
<Route path="/" component={App}>
{/*IndexRoute 代表默认路由,如 url 为: localhost:8080/ ,默认读取Respos;如果 url为: localhost:8080/about 读取About component ;
如果不指定 IndexRoute ,默认为undefined, 访问localhost:8080/ 将不显然任何component */}
<IndexRoute component={Repos} />
<Route path="/about" component={About}/>
</Route>
</Router>
1.3 Params
react 学习笔记的更多相关文章
- react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
- React学习笔记--程序调试
React学习笔记 二 程序调试 前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...
- React学习笔记(一)- 入门笔记
React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...
- React学习笔记(七)条件渲染
React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...
- React学习笔记(六)事件处理
React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...
- React学习笔记(五)State&声明周期
React学习笔记(五) 四.State&声明周期 可以为组件添加"状态(state)".状态与属性相似,但是状态是私有的,完全受控于当前组件. 局部状态就是只能用于类(定 ...
- React学习笔记 - 组件&Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
- React学习笔记 - 元素渲染
React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...
- React学习笔记 - JSX简介
React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello ...
- React学习笔记 - Hello World
React Learn Note 1 React学习笔记(一) 标签(空格分隔): React JavaScript 前.Hello World 1. 创建单页面应用 使用Create React A ...
随机推荐
- Keras学习~试用卷积~跑CIFAR-10
import numpy as np import cPickle import keras as ks from keras.layers import Dense, Activation, Fla ...
- Adobe AIR对本地文件(XML文件)的操作
引用:http://addiwang.blog.163.com/blog/static/118130772011221114230288/ Air的文件操做主要涉及两个类,FIle和FileStrea ...
- 3.多线程NSOperation
1.NSOperation的基本操作 使用NSOperation的两个子类,NSInvocationOperation 和 NSBlockOperation 创建操作,然后将操作添加到队列中去执行 / ...
- Windows访问Ubuntu14.04远程桌面全攻略
最近接到一个任务,在Ubuntu系统下开发一个串口读写程序.开发要在台式机上进行,安装UbuntuKylin 14.04,并且在串口连接了设备.个人使用的是笔记本电脑,系统是Windows8.1.自然 ...
- markdown-js 添加表格,代码块 parse
简介 markdown-js 是将 markdown转换成 HTML 的 JavaScript 库,我再网站中使用它来预览 markdown ,但是发现它对 代码块 和 表格 是不转换的.这么鸡肋的地 ...
- Bash:-3次错误输入退出脚本
Limit_Condition() { let count++ ]];then echo "超过3次机会,自动关停脚本" exit fi Comfirm() { count= wh ...
- JS 获取url参数
<html> <body> 浏览器中输入 http://localhost/test/js_url.php?a1=aaa&a2=bbb&a3=ccc 会依次弹出 ...
- Thinkphp学习回顾(二)之config.php的配置
常见配置项 <? return array( //'配置项'=>'配置值' 'TMPL_L_DELIM'=>'<{', //修改左定界符,防止其与js中的代码重合,发生造成问题 ...
- sql中批量删除带有外键的所有表
1首先删除所有的外检约束 --删除所有外键约束 DECLARE c1 cursor forselect 'alter table ['+ object_name(parent_obj) + '] dr ...
- 在SpringMVC框架下实现数据的国际化(即数据实现多国文字之间的转换)
在eclipse中javaEE环境下:导入必要的架包 web.xml配置文件: <?xml version="1.0" encoding="UTF-8"? ...