react-router简介
Web应用中的路由的作用和原理:保证视图和URL的同步,可以把视图看成资源的一种表现。当用户在页面中进行操作时,应用会在若干个交互状态中切换,比如用户会单击浏览器的前进、后退按钮进行切换等。路由系统的职责之一就是记录一些重要的状态,比如用户的登录状态、当前访问资源、用户的上一访问资源等,并根据需要重新以同步或异步的方式向服务端请求获取资源,然后重新渲染视图。
在传统的多页面应有开发中,路由的概念仅仅存于后端Web应用服务器端(后端路由),现在则逐渐向前端延伸,形成前端路由框架。react-router则是与React配套的前端框架路由系统,它通过管理URL,实现React组件的切换和状态的变化。
学习react-router 可以看其作者的官网的资料 https://reacttraining.com/react-router 。在使用前,首先要了解 react-router ( https://github.com/ReactTraining/react-router ) 和
react-router-dom (https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom )的区别。
- react-router
React-router提供了一些router的核心api,包括Router, Route, Switch等,但是它没有提供dom操作进行跳转的api。
- react-router-dom
React-router-dom提供了BrowserRouter, Route, Link等api,我们可以通过dom的事件控制路由。例如点击一个按钮进行跳转,大多数情况下我们是这种情况,所以在开发过程中,我们更多是使用React-router-dom。
具体学习使用 react-router和react-router-dom可参照这篇文章:React-router4简约教程
react-router简介的更多相关文章
- [Web 前端] React Router v4 入坑指南
cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子 ...
- React Router简单Demo
简介 react router是使用react的时候首选的一个路由工具. 安装 react router包含react-router,react-router-dom和react-router-nat ...
- React Native 简介:用 JavaScript 搭建 iOS 应用(2)
[编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...
- React Native 简介:用 JavaScript 搭建 iOS 应用 (1)
[编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...
- [Redux] Filtering Redux State with React Router Params
We will learn how adding React Router shifts the balance of responsibilities, and how the components ...
- [转] React Router 使用教程
PS:react-route就是一个决定生成什么父子关系的组件,一般和layout结合起来,保证layout不行,内部的子html进行跳转 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系. ...
- [Redux] Navigating with React Router <Link>
We will learn how to change the address bar using a component from React Router. In Root.js: We need ...
- [Redux] Adding React Router to the Project
We will learn how to add React Router to a Redux project and make it render our root component. Inst ...
- React Router基础使用
React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步 下面就来简单 ...
- 最新的chart 聊天功能( webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7)
请表明转载链接: 我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到. 我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊 ...
随机推荐
- npm总是报错:unable to verify the first certificate
今天npm install总是报错:unable to verify the first certificate(无法验证第一证书),查了一下发现 As of February 27, 2014, n ...
- Zabbix Server 自带模板监控有密码MySQL数据库
Zabbix Server 自带模板监控有密码MySQL数据库 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Zabbix-agent端的配置 1>.为数据库设置密码 ...
- passat QA / error code 20190210
s 帕萨特B5 技术资料下载 https://pan.baidu.com/s/1KXYly7eGDUSI5QiLcz8fiQ 提取码: 1i7u 星期日,10,二月,2019,17:16:16:317 ...
- python数据结构总结
一.列表 1.列表脚本操作符: (1)扩增的操作符: “+”:用于组合列表:如[1,2,3]+[4,5,6]==>[1,2,3,4,5,6] "*":重复;如[2,3]*2= ...
- 关于react上线系列问题及解决方案
近使用react做了一个音乐播放器小项目,在线下开发完成后,测试一切都没有问题,于是打算打包上线.首先注册了一个新浪云账号,然后创建了一个SAE应用实例,再然后就照着新浪云给出的远程仓库进行push. ...
- https笔记【转】
图解HTTPS 我们都知道HTTPS能够加密信息,以免敏感信息被第三方获取.所以很多银行网站或电子邮箱等等安全级别较高的服务都会采用HTTPS协议. HTTPS简介 HTTPS其实是有两部分组成:HT ...
- jQuery使用(八):运动方法
show().hide().toggle() 参数:null或(duration,easing,callblack) fadeIn().fadeout().fadeToggle().fadeTo() ...
- springMVC怎么接受前台传过来的多种类型参数?(集合、实体、单个参数)
创建一个实体:里面包含需要接受的多种类型的参数.如实体.list集合.单个参数.(因为springMVC无法同时接受这几种参数,需要创建一个实体包含它们来接受) 如接收User(bean里面包含Lis ...
- 开源框架.netCore DncZeus学习(一)npm安装
今天看到一个不错的开源项目DncZeus, https://github.com/lampo1024/DncZeus 整个界面挺漂亮,而且权限做到了按钮级别,功能也较容易扩展,刚好学习VUE纯看文章很 ...
- 【十】虚拟机工具 03 - jinfo命令使用
guchunchaodeMacBook-Air:workspaces guchunchao$ jinfo Usage: jinfo [option] <pid> (to connect ...