react与react-router
路由在单页应用极其常见,不论是angularjs项目还是react项目,都有路由。
在react项目中使用路由,我们当然是全局安装react-router.
第一步:
第二步:创建几个要跳转到的页面

第三步:配置routerMap

注意,代码中path='detail/:id',最后一个标记表示参数,例如/detail/123这个123就是参数
第四步:使用router

这里的hashHistory,规定用 url 中的 hash 来表示 router
第五步:页面跳转
Home页

List页
我们在 List 页面中,使用 js 跳转。

Detail页
点击 List 页面就进入了Detail页面,我们还可以给Detail页面手动添加type属性

快是前端页面优化的共同目标,如何让路由(即首页)加载的更快?其实也是让网页进入的更快。
抛开代码效率问题,其中一个解决方案就是先不要加载其他页面的代码,即按需加载
针对大型项目的静态资源懒加载问题,react-router 也给出了解决方案.
本博客升华自:大众点评app视频。
完整的demo见github:https://github.com/JserJser/reactWebApp/tree/master/react-router
react与react-router的更多相关文章
- [React] 10 - Tutorial: router
Ref: REACT JS TUTORIAL #6 - React Router & Intro to Single Page Apps with React JS Ref: REACT JS ...
- React Navigation & React Native & React Native Navigation
React Navigation & React Native & React Native Navigation React Navigation https://facebook. ...
- React学习笔记-1-什么是react,react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
- 小谈React、React Native、React Web
React有三个东西,React JS 前端Web框架,React Native 移动终端Hybrid框架,React Web是一个源码转换工具(React Native 转 Web,并之所以特别提出 ...
- React的React Native
React的React Native React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React ...
- 重谈react优势——react技术栈回顾
react刚刚推出的时候,讲react优势搜索结果是几十页. 现在,react已经慢慢退火,该用用react技术栈的已经使用上,填过多少坑,加过多少班,血泪控诉也不下千文. 今天,再谈一遍react优 ...
- React 与 React Native 底层共识:React 是什么
此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法,此小节主要介绍 React 的底层原理与 ...
- 一次掌握 React 与 React Native 两个框架
此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法. 1. 软件开发语言与框架的学习本质 我 ...
- 《React Native 精解与实战》书籍连载「React 与 React Native 简介」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- [React] Validate React Forms with Formik and Yup
Validating forms in React can take several lines of code to build. However, Formik's ErrorMessage co ...
随机推荐
- 初级Java工程师面试所遇面试题
1.servlet的生命周期 : 一.百度百科 : 1.客户端请求servlet: 2.加载servlet类到内存: 3.实例化并调用init()方法初始化servlet: 4.调用service() ...
- 分布式监控系统Zabbix-添加windows监控主机
大多数情况下,线上服务器都是linux系统,但是偶尔也会有些windows机器.下面简单介绍下zabbix添加windows监控机的操作:1)下载windows的zabbix_agent下载地址:ht ...
- php 中 opendir() readdir() scandir()
opendir(path,context)若成功,则该函数返回一个目录流,否则返回 false 以及一个 error.可以通过在函数名前加上 “@” 来隐藏 error 的输出. readdir() ...
- Daily Scrumming* 2015.12.18(Day 10)
一.团队scrum meeting照片 二.成员工作总结 姓名 任务ID 迁入记录 江昊 任务1085 https://github.com/buaaclubs-team/temp-front/com ...
- kNN算法学习(一)
1.首先需要一些训练样本集,例如一道问题(数据)及答案(标签),可以看做一条样本,那么多条,就是样本集 当然这里应该是一条数据及该数据所属的分类,该类别称为标签 2.现在我们已经知道数据与所属类别的对 ...
- 使用Junit进行单元测试
使用Junit进行单元测试 一.目的和要求 JUnit是一款由Erich Gamma(<设计模式>的作者)和Kent Beck(极限编程的提出者)编写的开源的回归测试框架,供Java编码人 ...
- VS2015 导航栏 查看每个cpp文件中类以及类成员函数的框框
这个可以查看每个cpp文件中类以及类成员函数的框框叫导航栏! 怎么打开导航栏可以再百度.
- Jenkins 安装简记录
下载jenkins.war,放入tomcat 启动tomcat,如果console报错java.lang.OutOfMemoryError: PermGen space,则修改startup.bat( ...
- docker 下运行 postgresql 的命令
postgresql docker下启动的命令 docker run --name pgdata -p : -e POSTGRES_PASSWORD=Test6530 -v /pgdata:/var/ ...
- pandas重新索引
#重新索引会更改DataFrame的行标签和列标签.重新索引意味着符合数据以匹配特定轴上的一组给定的标签. #可以通过索引来实现多个操作 - #重新排序现有数据以匹配一组新的标签. #在没有标签数据的 ...