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简介的更多相关文章

  1. [Web 前端] React Router v4 入坑指南

    cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子 ...

  2. React Router简单Demo

    简介 react router是使用react的时候首选的一个路由工具. 安装 react router包含react-router,react-router-dom和react-router-nat ...

  3. React Native 简介:用 JavaScript 搭建 iOS 应用(2)

    [编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...

  4. React Native 简介:用 JavaScript 搭建 iOS 应用 (1)

    [编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...

  5. [Redux] Filtering Redux State with React Router Params

    We will learn how adding React Router shifts the balance of responsibilities, and how the components ...

  6. [转] React Router 使用教程

    PS:react-route就是一个决定生成什么父子关系的组件,一般和layout结合起来,保证layout不行,内部的子html进行跳转 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系. ...

  7. [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 ...

  8. [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 ...

  9. React Router基础使用

    React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步 下面就来简单 ...

  10. 最新的chart 聊天功能( webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7)

    请表明转载链接: 我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到. 我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊 ...

随机推荐

  1. python bytes类型去除尾部字节

    by = b'\x01\x02' print(by) by = by.rstrip() print(by) by = by.rstrip(chr(2).encode()) print(by) b'\x ...

  2. Win7无法安装程序提示Installer integrity check has failed的解决方法

    最近小明在Win7系统中下载了一款软件,但是在下载的时候弹出了NSIS Error:Installer integrity check has failed.Common causer include ...

  3. nginx中间件

    Nginx简介 Nginx是一个开源且高性能.可靠的HTTP中间件.代理服务.其特点是占有内存少,并发能力强. Nginx优势:IO多路复用epoll 1.什么是IO复用 它是内核提供的一种同时监控多 ...

  4. 信用评分卡 (part 3of 7)

    python信用评分卡(附代码,博主录制) https://study.163.com/course/introduction.htm?courseId=1005214003&utm_camp ...

  5. RocketMQ_问题_启动报错,修改堆内存大小

    1.启动broker报错 虚拟机内存小,导致虚拟机中的JVM内存小,进而在启动broker时分配JVM内存遇到问题 查询网上得知,查看/usr/local/rocketmq-all-4.3.0/dis ...

  6. java io系列04之 管道(PipedOutputStream和PipedInputStream)的简介,源码分析和示例

    本章,我们对java 管道进行学习. 转载请注明出处:http://www.cnblogs.com/skywang12345/p/io_04.html java 管道介绍 在java中,PipedOu ...

  7. jackson工具类 对象转字符串 -- 字符串转对象

    这个一个json的工具类.用的是jackson,当然还有谷歌的gosn,阿里的fastjson ,但是jackson的感觉还是最成熟(网上大神说的...) 实现的功能很简单,对象转字符串  字符串转简 ...

  8. 获取ArcMap窗口句柄,通过WinAPI获取工作空间中点击要素的系统桌面坐标实现窗体跟随

    这里用了个“桌面坐标”,是希望区分一下ArcGis的“屏幕坐标”(与之对应的还有一个“地理坐标”). 什么是“屏幕坐标”呢?使用ITool接口的OnMouseDown方法获取的“x,y”值即是,其原点 ...

  9. 自学python 5.

    1.tu = ("alex", [11, 22, {"k1": 'v1', "k2": ["age", "na ...

  10. SSM框架的搭建和测试(Spring+Spring MVC+MyBatis)

    Spring MVC:MVC框架,通过Model-View-Controller模式很好的将数据,业务与展现进行分离. MyBatis:数据持久层框架 我这里使用的是MyEclipse 2016 CI ...