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

    环境准备 1. 下载nuget : https://www.nuget.org/downloads 2. 设置到环境变量Path, 使生效:在Cmd打入: set path=abc  关闭Cmd (C ...

  2. 撰写POPUSH需求文档

    不当家不知柴米贵,撰写了正规的软件需求文档才知道软件工程的复杂性 感谢@洪宇@王需@江林楠下午的加班加点,五个人正闷在406B奋斗中,加油!

  3. Scrum Meeting NO.7

    Scrum Meeting No.7 1.会议内容 经过老师提醒,我们认识到,应尽快把主要功能实现,其他的细枝末节应在这之后慢慢添加.当今最重要的任务是和online组和数据处理组实现数据共享. 此外 ...

  4. 如何使squild服务只能使用自定义的端口号

    编辑配置文件: vim /etc/squid/squid.conf http_port  10000 使用 setsebool 命令来限制 squild 服务只能使用自定义的端口: setsebool ...

  5. 申港集中运营平台Linux测试环境架构搭建

    架构图 服务一览 ESB安装 ESB全称为Enterprise Service Bus,即企业服务总线.ESB提供了网络中最基本的连接中枢,是构筑企业神经系统的必要元素.ESB的出现改变了传统的软件架 ...

  6. Spring MVC (Java),强制页面不缓存

    response.setDateHeader("Expires",0);        response.setHeader("Buffer","Tr ...

  7. Qt__事件处理机制

    一.Qt事件 Qt会将系统消息(如鼠标按键.键盘按键等)转化为Qt事件,Qt事件被封装为对象且定义该对象的类均继承自抽象类QEvent. 二.Qt事件的产生 1.操作系统产生 Spontaneous ...

  8. Java 数组实现 stack

    首先定义 IStack package cn.com.example.stack; /** * Created by Jack on 2017/3/8. */ public interface ISt ...

  9. MyBatis:一对一关联查询

    MyBatis从入门到放弃三:一对一关联查询 前言 简单来说在mybatis.xml中实现关联查询实在是有些麻烦,正是因为起框架本质是实现orm的半自动化. 那么mybatis实现一对一的关联查询则是 ...

  10. php-扩展模块查找下载网址

    http://pecl.php.net/ 在该网页里面输入想要查找的扩展模块名 如: 搜索结果: