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 ...
随机推荐
- gulp 安装 使用 和删除
1.安装 全局安装: npm intstall gulp -g (首先你得有node.js ,这个可以去node 官网下载个iso的镜像安装包,傻瓜式安装.自带npm) 安装在项目中: 首先 ...
- 2.多线程-GCD
1.基本概念 同步任务:在当前线程按顺序执行,不开启新的线程 异步任务:有开新线程的欲望 串行队列:一个一个执行 并行队列:多个任务同时执行 --------------------------- ...
- CoreData 轻量级迁移
CoreData 轻量级迁移 Core Data 的轻量级迁移可以处理对数据模型进行的简单更改,例如将新属性添加到现有实体中,轻量级迁移基本上与普通迁移相同,区别就是不需要映射模型,因为Core Da ...
- ClickOnce添加自定义prerequisite
参考http://www.codeproject.com/Articles/15863/Add-your-own-custom-prerequisite-to-quot-ClickOnce 下载地址: ...
- angular_ui-router ——依赖注入
Angularjs ui-router - 组件: $state / $stateProvider:管理状态定义.当前状态和状态转换.包含触发状态转换的事件和回调函数,异步解决目标状态的任何依赖项,更 ...
- python:模态编程框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- [课程设计]任务进度条&开发日志目录
任务进度条&开发日志目录 周期 时间 任务 Sprint One 11.14 ● Scrum团队分工及明确任务1.0 Sprint One 11.15 ● Scr ...
- js实现css、addClass、removeClass和toggleClass
JQuery中获取CSS样式css(name):访问第一匹配元素的样式属性css(name,value):在所有匹配的元素中,设置一个样式属性的值css(properties):把一个“名/值对”对象 ...
- Editplus配置VC++(2) 与/d1reportSingleClassLayout
前篇文章:Editplus配置VC++(1) 及相关注意事项 VC++有两个隐含编译选项/d1reportSingleClassLayout和/d1reportAllClassLayout /d1 ...
- SuiteScript > Apply script to Assembly and Kit
Path: Customization > Scripting > Scripts > New Limitation: Client script can't apply to As ...