react-router 4.0版本学习笔记
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版本学习笔记的更多相关文章
- React Router 4.0 实现路由守卫
在使用 Vue 或者 Angular 的时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的 beforeEnter 函 ...
- 初步学习React Router 4.0
React Router 4.0 是react官方推荐的路由库.4是已经正式发布的最新版本. 初始化项目启动之后: npm run eject 弹出配置文件.自定义配置webpack 查看下pac ...
- react router 4.0以上的路由应用
thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...
- 从零开始搭建.NET Core 2.0 API(学习笔记一)
从零开始搭建.NET Core 2.0 API(学习笔记一) 一. VS 2017 新建一个项目 选择ASP.NET Core Web应用程序,再选择Web API,选择ASP.NET Core 2. ...
- React Router 4.0 + webpack 实现组件按需加载
网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...
- React Router 4.0 体验
React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编 ...
- React Router V4.0学习笔记
最近在学习React Router,但是网站的教程多半还是3.X版本之前的,所以我只能在GitHub上找到React Router的官方文档在读.后来总结了一下,包括学习经验以及V3.X与V4.X的差 ...
- Swift 2.0 字符串学习笔记(建议掌握OC字符串知识的翻阅)
自己公司开现在使用OC语言在写,但Swift似乎是苹果更推荐使用的开发语言,估计也是未来开发的趋势,自己以前有接触swift,但又由于公司的项目赶,也没有时间去好好地学习这款开发语言.现在年底了,项目 ...
- hadoop1.0.3学习笔记
回 到 目 录 最近要从网上抓取数据下来,然后hadoop来做存储和分析. 呆毛王赛高 月子酱赛高 小唯酱赛高 目录 安装hadoop1.0.3 HDFS wordcount mapreduce去重 ...
随机推荐
- react的constructor和super的具体含义和使用
1.constructor( )-----super( )的基本含义 这是ES6对类的默认方法,通过 new 命令生成对象实例时自动调用该方法.并且,该方法是类中必须有的,如果没有显示定义,则会默认添 ...
- MongoDB+nodejs查询并返回数据
const express = require('express');const router = express.Router(); const Monk = require('monk');con ...
- POJ 2406 Power String
算出next数组. 对于任何一个循环字串,len-next[len]必为最小循环节长度 若len%(len-next[len])==0 即为循环字串,n=len/(len-next[len]) 否则输 ...
- AIDE
安装 yum install aide 修改配置文件 vim /etc/aide.conf (指定对哪些文件进行检测) /test/chameleon R /bin/ps R+a /usr/bin/c ...
- EasyUI获取正在编辑状态行的索引
function getRowIndex(target){ var tr = $(target).closest("tr.datagrid-row"); return paseIn ...
- spring boot 集成swagger2
1 在pom.xml中加入Swagger2的依赖 <dependency> <groupId>io.springfox</groupId> <artifac ...
- js浮点数加减乘除
浮点数精确计算 /** ** 加法函数,用来得到精确的加法结果 ** 说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显.这个函数返回较为精确的加法结果. ** 调用:ac ...
- java 调用第三方系统时的连接代码-记录
前言:该文章主要是总结我在实际工作中遇到的问题,在调取第三方系统的时候出现的问题,算自己的总结.各位博友如果有什么建议或意见欢迎留言指正. 先将准备传入参数 再与第三方系统建立连接 再第三方系统处理后 ...
- 常用的一些api
发送手机短信 // 发送短信给安全号码 SmsManager smsManager = SmsManager.getDefault(); smsManager.sendTextMessage(phon ...
- laravel5.2总结--数据库操作
1 配置信息 1.1配置目录: config/database.php 1.2配置多个数据库 //默认的数据库 'mysql' => [ 'driver' => 'mysql', 'hos ...