路由在单页应用极其常见,不论是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的更多相关文章

  1. [React] 10 - Tutorial: router

    Ref: REACT JS TUTORIAL #6 - React Router & Intro to Single Page Apps with React JS Ref: REACT JS ...

  2. React Navigation & React Native & React Native Navigation

    React Navigation & React Native & React Native Navigation React Navigation https://facebook. ...

  3. React学习笔记-1-什么是react,react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

  4. 小谈React、React Native、React Web

    React有三个东西,React JS 前端Web框架,React Native 移动终端Hybrid框架,React Web是一个源码转换工具(React Native 转 Web,并之所以特别提出 ...

  5. React的React Native

    React的React Native React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React ...

  6. 重谈react优势——react技术栈回顾

    react刚刚推出的时候,讲react优势搜索结果是几十页. 现在,react已经慢慢退火,该用用react技术栈的已经使用上,填过多少坑,加过多少班,血泪控诉也不下千文. 今天,再谈一遍react优 ...

  7. React 与 React Native 底层共识:React 是什么

    此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法,此小节主要介绍 React 的底层原理与 ...

  8. 一次掌握 React 与 React Native 两个框架

    此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法. 1. 软件开发语言与框架的学习本质 我 ...

  9. 《React Native 精解与实战》书籍连载「React 与 React Native 简介」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  10. [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 ...

随机推荐

  1. Dell BOSS 卡是什么

    全名: Boot Optimized Storage Solution 针对 M.2 接口的 SSD,主板上必须设计接口进行适配. 设计一款主板对于硬件厂商来说是有成本的,其中包括 主板设计成本 产品 ...

  2. Ceph分布式存储-原理介绍及简单部署

    1)Ceph简单概述Ceph是一个分布式存储系统,诞生于2004年,最早致力于开发下一代高性能分布式文件系统的项目.Ceph源码下载:http://ceph.com/download/.随着云计算的发 ...

  3. nginx的access.log文件详解

    事实证明,日志文件真的是很重要很重要的.能够帮助我们快速的定位问题,并且知道用户访问的状态,浏览器,Ip,接口地址等,简直可怕.. 一.nginx的access.log(1)对博主而言,日志文件存放在 ...

  4. PHP magic_quotes_gpc 和 addslashes解析

    默认情况下,PHP 指令 magic_quotes_gpc 为 on,它主要是对所有的 GET.POST 和 COOKIE 数据自动运行 addslashes().不要对已经被 magic_quote ...

  5. Record for Individual Project ( Word frequency program )

    1.  预计时间 ● 对问题总体的理解.规划:10 min ● 设计编写程序:5 h ● 调试: 分模块-40 min; 总体-40min ● 测试(性能分析).改进:1 h 2.  实际用时 ● 对 ...

  6. 剑指offer:字符串的排列

    题目描述: 输入一个字符串,按字典序打印出该字符串中字符的所有排列.例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba. 输入描述: ...

  7. scipy的一些函数名

    rvs:随机变量pdf:概率密度函数cdf:累计分布函数sf:残存函数(1-CDF)ppf:分位点函数(CDF的逆)isf:逆残存函数(sf的逆)stats:返回均值,方差,(费舍尔)偏态,(费舍尔) ...

  8. Under the same directory(folder) copy or rename with the different extension name

    @echo offsetlocal EnableDelayedExpansionfor /f "delims=" %%i in ('dir *.vm /q/s/b') do ( c ...

  9. 终端curl调用jenkins自动化持续集成

    1.curlcurl是利用URL语法在命令行方式下工作的开源文件传输工具.它被广泛应用在Unix.多种Linux发行版中,并且有DOS和Win32.Win64下的移植版本. 1.1 获取url指向的页 ...

  10. [日常工作]WorkStation 使用端口转发的方式使用宿主机IP地址提供服务

    1. 虚拟机内的地址如果经常变化,或者是想使用宿主机进行网络服务 但是又不想有人能够访问具体的服务器提供机器.. 可以使用宿主机转发虚拟机的端口的方式来进行处理. workstation 比较好实现 ...