路由在单页应用极其常见,不论是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. 微信小程序开发工具 ubuntu linux版本

    安装 http://blog.csdn.net/zhangyingguangails/article/details/72517182 sudo apt install wine sudo git c ...

  2. 1013 B. And

    链接 [http://codeforces.com/contest/1013/problem/B] 题意 给你一个n和x,再给n个数,有一种操作用x&a[i]取代,a[i],问使其中至少两个数 ...

  3. [Beta阶段]展示博客

    一.团队成员简介与个人博客地址 团队博客地址:http://www.cnblogs.com/wowotoubuaa/ 江昊,项目经理http://www.cnblogs.com/haoj/ 王开,后端 ...

  4. 常见IP端口

    21端口:21端口主要用于FTP(File Transfer Protocol,文件传输协议)服务. 23端口:23端口主要用于Telnet(远程登录)服务,是Internet上普遍采用的登录和仿真程 ...

  5. C#获取当月第一天和最后一天

    当月第一天0时0分0秒: DateTime.Now.AddDays(1 - DateTime.Now.Day).Date 当月最后一天23时59分59秒: DateTime.Now.AddDays(1 ...

  6. atcoder B - Frog 2 (DP)

    B - Frog 2 Time Limit: 2 sec / Memory Limit: 1024 MB Score : 100100 points Problem Statement There a ...

  7. MyBatis 返回类型resultType为map时的null值不返回问题

    问题一:    查询结果集中 某字段 的值为null,在map中不包含该字段的key-value对 解决:在mybatis.xml中添加setting参数 <!-- 在null时也调用 sett ...

  8. Java面向对象(Eclipse高级、类与接口作为参数返回值)

      面向对象 今日内容介绍 u Eclipse常用快捷键操作 u Eclipse文档注释导出帮助文档 u Eclipse项目的jar包导出与使用jar包 u 不同修饰符混合使用细节 u 辨析何时定义变 ...

  9. PHP使用MySQL实现消息队列

    消息队列常用在流量削峰(秒杀场景),异步通信等地方. 大体的结构如下: 类似于消费者和生产者的关系,首先生产者在消息队列未满的时候,才将生产的产品放进消息队列中:消费者在消息队列不为空的时候,才从消息 ...

  10. PAT 1011 A+B和C

    https://pintia.cn/problem-sets/994805260223102976/problems/994805312417021952 给定区间[-2^31^, 2^31^]内的3 ...