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. centos之Too many open files问题-修改linux最大文件句柄数

    linux服务器大并发调优时,往往需要预先调优linux参数,其中修改linux最大文件句柄数是最常修改的参数之一. 在linux中执行ulimit -a 即可查询linux相关的参数,如下所示: [ ...

  2. 9.组合模式(Composite Pattern)

    动机(Motivate):    组合模式有时候又叫做部分-整体模式,它使我们树型结构的问题中,模糊了简单元素和复杂元素的概念,客户程序可以向处理简单元素一样来处理复杂元素,从而使得客户程序与复杂元素 ...

  3. Sqlserver中的储存过程

    一.什么是存储过程(Stored Procedure) 存储过程是一段存储在数据库的“子程序”,本质是一个可重复使用的SQL代码块,可以理解为数据库端的“方法”. 存储过程的好处: ①提高性能:由于数 ...

  4. 使用rvm安装与切换Ruby

    列出已知的 Ruby 版本 rvm list known安装一个 Ruby 版本 rvm install 2.3.1 --disable-binary这里安装了最新的 2.2.0, rvm list ...

  5. ACM-ICPC 2018 焦作赛区网络预赛 A Magic Mirror(签到)

    https://nanti.jisuanke.com/t/31710 题意 若输入的是Jessie或jessie,输出Good guy!,否则输出Dare you say that again? 分析 ...

  6. 高性能的代理服务-Envoy

    Envoy最初建于Lyft,是一个高性能的代理服务,为服务网格提供了基础. 它与应用程序并行运行,通过以平台无关的方式提供通用功能来抽象网络. 当基础架构中的所有服务流量都通过Envoy网格时,通过一 ...

  7. 【五】服务熔断、降级 —— Hystrix(豪猪)

    分布式系统面临的问题 复杂分布式体系结构中的应用程序有数十个依赖,每个依赖关系将在某些时候将不可避免地失败. 服务雪崩 多个微服务之间调用的时候,假设微服务A调用微服务B和微服务C,微服务 B和微服务 ...

  8. Java8新特性 并行流与串行流 Fork Join

    并行流就是把一个内容分成多个数据块,并用不同的线程分 别处理每个数据块的流. Java 8 中将并行进行了优化,我们可以很容易的对数据进行并 行操作. Stream API 可以声明性地通过 para ...

  9. 【转】const int *p和int * const p的区别(常量指针与指向常量的指针)

    [转]作者:xwdreamer   出处:http://www.cnblogs.com/xwdreamer 对于指针和常量,有以下三种形式都是正确的: const char * myPtr = &am ...

  10. 【刷题记录】BZOJ-USACO

    接下来要滚去bzoj刷usaco的题目辣=v=在博客记录一下刷题情况,以及存一存代码咯.加油! 1.[bzoj1597][Usaco2008 Mar]土地购买 #include<cstdio&g ...