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. docker 私有仓库之Harbor搭建与使用

    Harbor搭建 下载Harbor: http://harbor.orientsoft.cn/ #下载offline版本 配置Harbor tar xvf harbor-online-installe ...

  2. CentOS 安装Python3、pip3

    https://ehlxr.me/2017/01/07/CentOS-7-%E5%AE%89%E8%A3%85-Python3%E3%80%81pip3/ CentOS 7 默认安装了 Python ...

  3. Spring Boot笔记八：表单验证

    所谓的表单验证,就是为了防止用户乱输入的,这个问题前端的HTML5就可以判断了,其实不需要后端来验证,这里还是讲一下后端验证 首先,我们的Person类,我们加上一些表单验证的注释,如下: packa ...

  4. ibatis项目启动报错The string "--" is not permitted within comments【原】

    该错误主要就是因为xml中<!-- [注释]--> 注释与-->之间没有空格造成xml解析错误 sqlMapConfig.xml内容如下 <?xml version=" ...

  5. Junit4学习与使用【转】

    参考: http://blog.csdn.net/qqhjqs/article/details/42219037

  6. sql注入问题-视图-事物-以及存储过程（可视化工具）

    可视化工具(了解) 可视化工具 workbench 视图 视图 是一张虚拟的表 语法: create view 视图表名 as select * from t1; 作用: .他是执行as 后面的sql ...

  7. 1、PHP入门二维数组与循环

    <?php $two=array(array(2,3),1=>array(1,2,3),2=>array(4,5,6)); echo $two[1][0];//输出1 echo $t ...

  8. Sql分页代码示例

    select * from (select ROW_NUMBER()over( order by id) orderid,* from test) a where a.orderid between ...

  9. Newtonsoft.Json序列化字符串-格式化

    转自:https://blog.csdn.net/wlphlj/article/details/51982866最近C#中需要将实体进行json序列化,使用了Newtonsoft.Json publi ...

  10. HTML 实例学习(基础)

    1.HTML <html> 标签 注意:对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码.有些浏览器会设置 GB ...