路由在单页应用极其常见,不论是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. qa_model

    [code=python] import os import sys import time import numpy import shelve import theano import thean ...

  2. #个人作业Week2——结对编程对象代码复审

    General 代码能够正确运行,能够正确生成指定数量的题目和答案,并且能够对给出的题目和答案文件进行比对,输出结果. 代码没有非常复杂的逻辑,比较容易理解,但是在缺少注释的情况下有部分代码需要较长时 ...

  3. SqlDataAdapter简单介绍 (转)

    From:  http://blog.sobnb.com/u/92/5532.html 一.特点介绍 1.表示用于填充 DataSet 和更新 SQL Server 数据库的一组数据命令和一个数据库连 ...

  4. 1.个人项目 Individual Project

    https://github.com/sunlitao 一. 实验1通讯录管理系统 通讯录中的联系人包含以下信息项:姓名.手机.办公电话.家庭电话.电子邮箱.所在省市.工作单位.家庭住址,群组分类(亲 ...

  5. SE Springer小组之《Spring音乐播放器》需求分析说明书二

    2.1 目标 Spring音乐播放器软件为课程<软件工程>所开发的课程作业,主要意图是为访问计算机中的mp3格式的音频文件,并使其能够完成访问,读取,添加,保存,播放,切换音频文件等功能. ...

  6. Linux CentOS虚拟机网卡配置

    最近在VMware安装CentOS6.5之后,每次从宿主机访问虚拟机的Oracle时,都要修改IP地址,因为没有设置虚拟机的IP,所以每次开机之后虚拟机的IP地址都是随机的,于是研究了下给虚拟机配置静 ...

  7. jquery ajax中data属性详解

    $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , ...

  8. SQL 中GO的作用

    use db_CSharp go select *, 备注=case when Grade>= then '成绩优秀' when Grade< and Grade>= then '成 ...

  9. pandas获取当前时间

    datetime.now()用于获取当前的日期和时间 print pd.datetime.now() #encoding:utf8 import pandas as pd print("(p ...

  10. selenium之下载

    # 测试下载功能,保存文件到指定的目录 # 不同的浏览器配置是不同的,本例使用chrome浏览器 # author:gongxr # date:2017-07-25 import time from ...