路由在单页应用极其常见,不论是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. 免费的 Vue.js 入门与进阶视频教程

    这是我免费发布的高质量超清「Vue.js 入门与进阶视频教程」. 全网最好的.免费的 Vue.js 视频教程,课程基于 Vue.js 2.0,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...

  2. C_数据结构_栈

    # include <stdio.h> # include <malloc.h> # include <stdlib.h> typedef struct Node ...

  3. Python学习笔记 ---第三章

    函数 函数是代码的一种抽象 函数 说明 abs 绝对值 max 最大值 hex 转换为16进制 强制数据类型转换 int('123') 123 int(12.35) 12 srt(100) '100' ...

  4. shell脚本--文件包含

    首先介绍一下shell中包含文件的方法,在C,C++,PHP中都是用include来包含文件,Go和Java使用import来包含(导入)包,而在shell中,很简单,只需要一个点“.”,然后跟着文件 ...

  5. sublime text3修改默认配置文件是失败的解决方法

    如果你修改sublime text3的默认配置文件Preferences.sublime-settings失败,现实的错误信息如下图: 其实根据提示信息就好找问题出在哪里了:权限 要想成功的修改默认配 ...

  6. js十大排序算法:冒泡排序

    排序算法说明: (1)对于评述算法优劣术语的说明 稳定:如果a原本在b前面,而a=b,排序之后a仍然在b的前面:不稳定:如果a原本在b的前面,而a=b,排序之后a可能会出现在b的后面: 内排序:所有排 ...

  7. 全新OCR3500数据

    改装: 手变6700,夹器彦豪R741,牙盘5700,前拨5700,后拨5701,飞轮5700,链条YBN S10 S2,弯把DEDA RHM01,前叉山寨BIANCHI K-VID,轮组FULCRU ...

  8. Vue 的语法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. [转帖]Nginx 的 TCP 负载均衡介绍

    Nginx 的 TCP 负载均衡介绍 https://www.cnblogs.com/felixzh/ 前几天同事问 nginx的代理 当时以为只有http的 现在看起来还有tcp的可以使用tcp 代 ...

  10. 【转帖】M1、M2增速

    M1.M2增速的背离与广义财政的资金滞留有关 作者: 万钊 2016-07-19 17:20 近期M1.M2增速的背离,引起了各方的极大关注.我们知道,M1以活期存款为主,具有高波动性,其增速与M2背 ...