Router

所有路由组件的底层接口,一般情况都不使用,而是使用更加高级的路由。

最常用的有两种<BrowserRouter>、<HashRouter>

<BrowserRouter>: 使用H5提供的history API来保持UI和URL同步。这个路由会对后台获取真实的url地址造成影响。

<HashRouter>: 使用URL的hash来保持UI和URL同步。拥有不同风格的hash来划分url和react路由地址。

Route

匹配url地址,渲染相应的组件。

参数 exact: 当值为true时,则要求路径与location.pathname必须完全匹配;

参数 strict: 当设为true的时候,有结尾斜线的路径只能匹配有斜线的location.pathname,这个值并不会对location.pathname中有其他的片段有影响;

match(路由参数)

params: 通过解析URL地址当中动态获取的参数

isExact: 当值为true的时候,整个URL地址都需要匹配

path: 匹配的路径格式

url: URL匹配的部分

获取:

在组件当中 this.props.match 获取

render和children   通过 ({match}) = > {}

location(路由参数)

pathname: 即将前往的路径

history(路由参数)

length: 堆栈数量

action: 当前动作,push、pop、replace, 前往、后台,替代

location: URL 路径 => pathname: URL路径;  search: 查询字符串; hash: URL的hash分段;

方法:

push() 在路由堆栈当中新增条目

replace() 堆栈当中的当前条目

go() 将堆栈向前/后推

goBack() => go(-1);

goForward() => go(1);

block() = > 阻止跳转

<Link > : 进行路径跳转

to: 需要跳转的路径

replace: 当他为true时,路由变换会替换当前的路由

<NavLink>: 是link的一个特定版本,可以添加样式参数

activeClassName: 当与当前url匹配的时候,使用的类名

activeStyle: 当与当前url匹配的时候,使用的样式

react-router 4.0版本学习笔记的更多相关文章

  1. React Router 4.0 实现路由守卫

    在使用 Vue 或者 Angular 的时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的 beforeEnter 函 ...

  2. 初步学习React Router 4.0

      React Router 4.0 是react官方推荐的路由库.4是已经正式发布的最新版本. 初始化项目启动之后: npm run eject 弹出配置文件.自定义配置webpack 查看下pac ...

  3. react router 4.0以上的路由应用

    thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...

  4. 从零开始搭建.NET Core 2.0 API(学习笔记一)

    从零开始搭建.NET Core 2.0 API(学习笔记一) 一. VS 2017 新建一个项目 选择ASP.NET Core Web应用程序,再选择Web API,选择ASP.NET Core 2. ...

  5. React Router 4.0 + webpack 实现组件按需加载

    网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...

  6. React Router 4.0 体验

    React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编 ...

  7. React Router V4.0学习笔记

    最近在学习React Router,但是网站的教程多半还是3.X版本之前的,所以我只能在GitHub上找到React Router的官方文档在读.后来总结了一下,包括学习经验以及V3.X与V4.X的差 ...

  8. Swift 2.0 字符串学习笔记(建议掌握OC字符串知识的翻阅)

    自己公司开现在使用OC语言在写,但Swift似乎是苹果更推荐使用的开发语言,估计也是未来开发的趋势,自己以前有接触swift,但又由于公司的项目赶,也没有时间去好好地学习这款开发语言.现在年底了,项目 ...

  9. hadoop1.0.3学习笔记

    回 到 目 录 最近要从网上抓取数据下来,然后hadoop来做存储和分析. 呆毛王赛高 月子酱赛高 小唯酱赛高 目录 安装hadoop1.0.3 HDFS wordcount mapreduce去重 ...

随机推荐

  1. react的constructor和super的具体含义和使用

    1.constructor( )-----super( )的基本含义 这是ES6对类的默认方法,通过 new 命令生成对象实例时自动调用该方法.并且,该方法是类中必须有的,如果没有显示定义,则会默认添 ...

  2. MongoDB+nodejs查询并返回数据

    const express = require('express');const router = express.Router(); const Monk = require('monk');con ...

  3. POJ 2406 Power String

    算出next数组. 对于任何一个循环字串,len-next[len]必为最小循环节长度 若len%(len-next[len])==0 即为循环字串,n=len/(len-next[len]) 否则输 ...

  4. AIDE

    安装 yum install aide 修改配置文件 vim /etc/aide.conf (指定对哪些文件进行检测) /test/chameleon R /bin/ps R+a /usr/bin/c ...

  5. EasyUI获取正在编辑状态行的索引

    function getRowIndex(target){ var tr = $(target).closest("tr.datagrid-row"); return paseIn ...

  6. spring boot 集成swagger2

    1  在pom.xml中加入Swagger2的依赖 <dependency> <groupId>io.springfox</groupId> <artifac ...

  7. js浮点数加减乘除

    浮点数精确计算 /** ** 加法函数,用来得到精确的加法结果 ** 说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显.这个函数返回较为精确的加法结果. ** 调用:ac ...

  8. java 调用第三方系统时的连接代码-记录

    前言:该文章主要是总结我在实际工作中遇到的问题,在调取第三方系统的时候出现的问题,算自己的总结.各位博友如果有什么建议或意见欢迎留言指正. 先将准备传入参数 再与第三方系统建立连接 再第三方系统处理后 ...

  9. 常用的一些api

    发送手机短信 // 发送短信给安全号码 SmsManager smsManager = SmsManager.getDefault(); smsManager.sendTextMessage(phon ...

  10. laravel5.2总结--数据库操作

    1 配置信息 1.1配置目录: config/database.php 1.2配置多个数据库 //默认的数据库 'mysql' => [ 'driver' => 'mysql', 'hos ...