1.Router

1.1 Histories

React Router 是建立在 history 之上的。一个 history 知道如何去监听浏览器地址栏的变化, 并解析这个 URL 转化为 location 对象, 然后 router 使用它匹配到路由,最后正确地渲染对应的组件。

常用的 history 有三种形式, 但是你也可以使用 React Router 实现自定义的 history。

1.2 IndexRoute

  IndexRoute 代表Route 级别的默认路径,同时,需要包在Route内,目录结构如下:

  1. <Router history={browserHistory}>
  2. <Route path="/" component={App}>
  3. {/*IndexRoute 代表默认路由,如 url 为: localhost:8080/ ,默认读取Respos;如果 url为: localhost:8080/about 读取About component ;
        如果不指定 IndexRoute ,默认为undefined, 访问localhost:8080/ 将不显然任何component */}
  4. <IndexRoute component={Repos} />
  5. <Route path="/about" component={About}/>
  6. </Route>
  7. </Router>

 1.3 Params

  

  

react 学习笔记的更多相关文章

  1. react学习笔记1--基础知识

    什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...

  2. React学习笔记--程序调试

    React学习笔记 二 程序调试   前面我们搭建好了React的基本开发环境,可以编写基本的React js程序了.但完成的开发环境肯定包含调试器,怎么调试用React编写的JS程序呢?有浏览器,比 ...

  3. React学习笔记(一)- 入门笔记

    React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...

  4. React学习笔记(七)条件渲染

    React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...

  5. React学习笔记(六)事件处理

    React学习笔记(六) 五.事件处理 React事件绑定属性的命名采用驼峰写法,不同于传统DOM全部小写. 如果采用JSX的语法,事件函数需要用大括号{}包裹函数名,不同于传统DOM字符串小括号的方 ...

  6. React学习笔记(五)State&声明周期

    React学习笔记(五) 四.State&声明周期 可以为组件添加"状态(state)".状态与属性相似,但是状态是私有的,完全受控于当前组件. 局部状态就是只能用于类(定 ...

  7. React学习笔记 - 组件&Props

    React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...

  8. React学习笔记 - 元素渲染

    React Learn Note 3 React学习笔记(三) 标签(空格分隔): React JavaScript 二.元素渲染 元素是构成react应用的最小单位. 元素是普通的对象. 元素是构成 ...

  9. React学习笔记 - JSX简介

    React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello ...

  10. React学习笔记 - Hello World

    React Learn Note 1 React学习笔记(一) 标签(空格分隔): React JavaScript 前.Hello World 1. 创建单页面应用 使用Create React A ...

随机推荐

  1. gulp 安装 使用 和删除

    1.安装 全局安装: npm intstall gulp -g      (首先你得有node.js ,这个可以去node 官网下载个iso的镜像安装包,傻瓜式安装.自带npm) 安装在项目中: 首先 ...

  2. 2.多线程-GCD

    1.基本概念 同步任务:在当前线程按顺序执行,不开启新的线程 异步任务:有开新线程的欲望   串行队列:一个一个执行 并行队列:多个任务同时执行 --------------------------- ...

  3. CoreData 轻量级迁移

    CoreData 轻量级迁移 Core Data 的轻量级迁移可以处理对数据模型进行的简单更改,例如将新属性添加到现有实体中,轻量级迁移基本上与普通迁移相同,区别就是不需要映射模型,因为Core Da ...

  4. ClickOnce添加自定义prerequisite

    参考http://www.codeproject.com/Articles/15863/Add-your-own-custom-prerequisite-to-quot-ClickOnce 下载地址: ...

  5. angular_ui-router ——依赖注入

    Angularjs ui-router - 组件: $state / $stateProvider:管理状态定义.当前状态和状态转换.包含触发状态转换的事件和回调函数,异步解决目标状态的任何依赖项,更 ...

  6. python:模态编程框

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. [课程设计]任务进度条&开发日志目录

    任务进度条&开发日志目录 周期 时间 任务 Sprint One   11.14     ●  Scrum团队分工及明确任务1.0    Sprint One   11.15   ●  Scr ...

  8. js实现css、addClass、removeClass和toggleClass

    JQuery中获取CSS样式css(name):访问第一匹配元素的样式属性css(name,value):在所有匹配的元素中,设置一个样式属性的值css(properties):把一个“名/值对”对象 ...

  9. Editplus配置VC++(2) 与/d1reportSingleClassLayout

    前篇文章:Editplus配置VC++(1) 及相关注意事项 VC++有两个隐含编译选项/d1reportSingleClassLayout和/d1reportAllClassLayout   /d1 ...

  10. SuiteScript > Apply script to Assembly and Kit

    Path: Customization > Scripting > Scripts > New Limitation: Client script can't apply to As ...