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 ...
随机推荐
- ajaxfileupload 传参数
引用:http://www.cnblogs.com/lyeo/archive/2012/05/11/2496261.html 直接上代码: var data = { name: 'my name', ...
- Intent传递数据的方法
一.传递List 1.传递List<String>的方法 ArrayList<String> info = new ArrayList<String>(); inf ...
- Makefile使用库
这篇文章演示了Makefile使用mysqlpp库和lua库的写法. test.cpp: #include <iostream> #include <stdint.h> #in ...
- XML Schema choice 元素
XSD : <xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:sch="http://w ...
- spring @condition 注解
spring @condition注解是用来在不同条件下注入不同实现的 demo如下: package com.foreveross.service.weixin.test.condition; im ...
- 【iPhone手机老提示升级怎么办】
首先复制链接 https://oldcat.me/web/NOOTA9.mobileconfig 然后到自带浏览器(Safari)打开,点击GO,后会弹出安装,安装即可,如果出现密码的,这个密码是你 ...
- Oracle学习笔记(1)----忘记用户名的密码该如何找回
(1)在连接数据库之前需要打开如下服务: (2)如果忘记用户的密码 I:打开cmd窗口 II:键入命令:connect / as sysdba; III:alter user 用户名 identifi ...
- Linux中tcpdump的编译和使用
tcpdump官网:http://www.tcpdump.org/ 转载于:http://www.cnblogs.com/hzl6255/p/6147985.html 目录 1. 介绍 2. 编译 2 ...
- 【转载】Tomcat崩溃事件
转载地址:http://www.blogjava.net/tedeyang/archive/2008/06/04/205740.html Tomcat崩溃事件 今天一大早产品一部项目经理就来找我,他们 ...
- CSU 1597 薛XX后代的IQ
Description 薛XX的低IQ是个令人头疼的问题,他的队友深受其害.幸运的是,薛XX非常有钱,所以他买了一些可以提高他的后代的IQ的药.这种药有三个属性,A,B和P.当薛XX使用这种药的时候, ...