React-router和React-router-dom的选择

很多刚使用react的同学在接触到react-router的时候就会很蛋疼,什么react-router和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。安装很简单npm i react-router-dom --save,安装了淘宝镜像的就用cnpm吧。

React-router-dom的核心用法

HashRouter和BrowserRouter

它们两个是路由的基本,就像盖房子必须有地基一样,我们需要将它们包裹在最外层,我们只要选择其一就可以了。现在讲它们的不同:

HashRouter

如果你使用过react-router2或3或者vue-router,你经常会发现一个现象就是url中会有个#,例如localhost:3000/#,HashRouter就会出现这种情况,它是通过hash值来对路由进行控制。如果你使用HashRouter,你的路由就会默认有这个#。
这就是HashRouter的使用情况。下面是对应的代码。

BrowserRouter

很多情况下我们则不是这种情况,我们不需要这个#,因为它看起来很怪,这时我们就需要用到BrowserRouter。

它的原理是使用HTML5 history API (pushState, replaceState, popState)来使你的内容随着url动态改变的, 如果是个强迫症或者项目需要就选择BrowserRouter吧。下面我们将主要结合它来讲解。
这里讲一个它们的基础api,basename。如果你的文件放在服务器的二级目录下则可以使用它。
它的效果如下图,当你的主页前面是有一级目录calendar时,同样会显示主页的内容。它常常配合Link使用。

Route

Route是路由的一个原材料,它是控制路径对应显示的组件。我们经常用的是exact、path以及component属性。

exact控制匹配到/路径时不会再继续向下匹配,path标识路由的路径,component表示路径对应显示的组件。后面我们将结合NavLink完成一个很基本的路由使用。同时我们可以设置例如/second/:id的方式来控制页面的显示,这需要配合Link或者NavLink配合使用。下面我们会提到

Link和NavLink的选择

两者都是可以控制路由跳转的,不同点是NavLink的api更多,更加满足你的需求。

Link

主要api是to,to可以接受string或者一个object,来控制url。使用方法如下

屏幕快照 2017-10-28 下午1.26.42.png526x562 23 KB


这时点击Link就会跳转到courses。

NavLink

它可以为当前选中的路由设置类名、样式以及回调函数等。使用如下

屏幕快照 2017-10-28 下午1.57.06.png819x372 39.9 KB

exact用于严格匹配,匹配到/则不会继续向下匹配,to则是控制跳转的路径,activeClassName是选中状态的类名,我们可以为其添加样式。我们在/second后面添加1234来想路由中传递信息,这结合了上面Route中的/second/:id,结合使用了,下面是效果图

屏幕快照 2017-10-28 下午1.58.40.png1438x620 38.4 KB

线面的1234内容显示需要用到match,我们马上就来讲一下。

match

match是在使用router之后被放入props中的一个属性,在class创建的组件中我们需要通过this.props.match来获取match之中的信息。match中包含的信息如下。

屏幕快照 2017-10-28 下午2.03.21.png1094x264 29.3 KB

我们常常会获取id进行使用

Switch

Switch常常会用来包裹Route,它里面不能放其他元素,用来只显示一个路由。

结语

第一次写这么长的内容,用不好的地方还请大家见谅,同时,这篇react-router4的简约教程只是讲了我们常用的部分,想了解更多的知识还需要我们去看官方文档。最后谢谢大家

React-router4简约教程的更多相关文章

  1. [Web 前端] React-router4简约教程

    cp from : http://react-china.org/t/react-router4/15843/1 React-router和React-router-dom的选择 很多刚使用react ...

  2. React 入门实例教程(转载)

    本人转载自: React 入门实例教程

  3. 基于Nodejs生态圈的TypeScript+React开发入门教程

    基于Nodejs生态圈的TypeScript+React开发入门教程   概述 本教程旨在为基于Nodejs npm生态圈的前端程序开发提供入门讲解. Nodejs是什么 Nodejs是一个高性能Ja ...

  4. [转] React Router 使用教程

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

  5. 【前端,干货】react and redux教程学习实践(二)。

    前言 这篇博文接 [前端]react and redux教程学习实践,浅显易懂的实践学习方法. ,上一篇简略的做了一个redux的初级demo,今天深入的学习了一些新的.有用的,可以在生产项目中使用的 ...

  6. React Native入门教程 3 -- Flex布局

    上一篇文章中介绍了基本组件的使用 React Native入门教程(笔记) 2 – 基本组件使用及样式 本节内容将继续沿用facebook官方例子介绍如何使用Flexbox布局把界面设计的多样化. 转 ...

  7. React Native入门教程2 -- 基本组件使用及样式

    在上一篇文章中,我们学会了如何搭建React Native的环境(React Native入门教程(笔记) 1 – 开发环境搭建),不知道你们是否搭建好了呢,如果还没有,那么快动起小手,来体验RN带给 ...

  8. React Native入门教程 1 -- 开发环境搭建

    有人问我为啥很久不更新博客..我只能说在学校宿舍真的没有学习的环境..基本上在宿舍里面很颓废..不过要毕业找工作了,我要渐渐把这个心态调整过来,就从react-native第一篇博客开始.话说RN也出 ...

  9. 120分钟React快速扫盲教程

    在教程开端先说些题外话,我喜欢在学习一门新技术或读过一本书后,写一篇教程或总结,既能帮助消化,也能加深印象和发现自己未注意的细节,写的过程其实仍然是一个学习的过程.有个记录的话,在未来需要用到相关知识 ...

随机推荐

  1. Azure IOT 设备固件更新技巧,看这一篇就够了

    嫌长不看版 今天为大家准备的硬菜是:在 Azure IoT 中心创建 Node.js 控制台应用,进行端到端模拟固件更新,为基于 Intel Edison 的设备安装新版固件的流程.通过创建模拟设备应 ...

  2. centos7 & centos6 rrdcache

    cat > /etc/systemd/system/rrdcached.service << EOF [Unit] Description=Data caching daemon f ...

  3. js&jquery:添加事件的三种方法和常用的一些事件

    一.添加事件的方法 1.EventTarget.addEventListener添加 获取事件目标元素,通过addEventListener函数添加 // Assuming myButton is a ...

  4. April 6 2017 Week 14 Thursday

    If you smile when no one else is around, you really mean it. 独处时的微笑,才是发自内心的. Recently I found I seld ...

  5. 最长公共单词,类似LCS,(POJ2250)

    题目链接:http://poj.org/problem?id=2250 解题报告: 1.状态转移方程: ; i<=len1; i++) { ; j<=len2; j++) { dp[i][ ...

  6. C. Tanya and Toys_模拟

    C. Tanya and Toys time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  7. 问题 C: B 统计程序设计基础课程学生的平均成绩

    题目描述 程序设计基础课程的学生成绩出来了,老师需要统计出学生个数和平均成绩.学生信息的输入如下: 学号(num)                     学生姓名(name)            ...

  8. c#简单加密和对称加密

    转自:https://www.cnblogs.com/zhihai/archive/2012/05/03/2480856.html using System;using System.Collecti ...

  9. WPF与Silverlight对比

    1.WPF中控件的肤色可以直接:telerik:StyleManager.Theme=”XXXXX”,不用再导入肤色的dll包.可Silverlight使用系统肤色时,要导入肤色的dll包. WPF引 ...

  10. 【学时总结】◆学时·VI◆ SPLAY伸展树

    ◆学时·VI◆ SPLAY伸展树 平衡树之多,学之不尽也…… ◇算法概述 二叉排序树的一种,自动平衡,由 Tarjan 提出并实现.得名于特有的 Splay 操作. Splay操作:将节点u通过单旋. ...