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 ...
随机推荐
- 免费的 Vue.js 入门与进阶视频教程
这是我免费发布的高质量超清「Vue.js 入门与进阶视频教程」. 全网最好的.免费的 Vue.js 视频教程,课程基于 Vue.js 2.0,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...
- C_数据结构_栈
# include <stdio.h> # include <malloc.h> # include <stdlib.h> typedef struct Node ...
- Python学习笔记 ---第三章
函数 函数是代码的一种抽象 函数 说明 abs 绝对值 max 最大值 hex 转换为16进制 强制数据类型转换 int('123') 123 int(12.35) 12 srt(100) '100' ...
- shell脚本--文件包含
首先介绍一下shell中包含文件的方法,在C,C++,PHP中都是用include来包含文件,Go和Java使用import来包含(导入)包,而在shell中,很简单,只需要一个点“.”,然后跟着文件 ...
- sublime text3修改默认配置文件是失败的解决方法
如果你修改sublime text3的默认配置文件Preferences.sublime-settings失败,现实的错误信息如下图: 其实根据提示信息就好找问题出在哪里了:权限 要想成功的修改默认配 ...
- js十大排序算法:冒泡排序
排序算法说明: (1)对于评述算法优劣术语的说明 稳定:如果a原本在b前面,而a=b,排序之后a仍然在b的前面:不稳定:如果a原本在b的前面,而a=b,排序之后a可能会出现在b的后面: 内排序:所有排 ...
- 全新OCR3500数据
改装: 手变6700,夹器彦豪R741,牙盘5700,前拨5700,后拨5701,飞轮5700,链条YBN S10 S2,弯把DEDA RHM01,前叉山寨BIANCHI K-VID,轮组FULCRU ...
- Vue 的语法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [转帖]Nginx 的 TCP 负载均衡介绍
Nginx 的 TCP 负载均衡介绍 https://www.cnblogs.com/felixzh/ 前几天同事问 nginx的代理 当时以为只有http的 现在看起来还有tcp的可以使用tcp 代 ...
- 【转帖】M1、M2增速
M1.M2增速的背离与广义财政的资金滞留有关 作者: 万钊 2016-07-19 17:20 近期M1.M2增速的背离,引起了各方的极大关注.我们知道,M1以活期存款为主,具有高波动性,其增速与M2背 ...