react-router4.x 组件和api介绍
react-router实用4.2.0
react-router非常复杂整体,比vue-router强大很多,好好研究,对你自身能力提高很有帮助
安装
cnpm install react-router --save 包含react router核心
cnpm install react-router-dom --save 包含react router的dom绑定
BrowserRouter
BrowserRouter是react路由的容器
相关属性如下
basename,用来设置路由的基础链接,<BrowserRouter basename="/api" />
getUserConfirmation,用来拦截Prompt组件,并且决定是否跳转,我专门做了一个例子
forceRefresh,用来设置是否强制浏览器整体刷新,默认是false
keLength,用来设置location.key的长度,默认是6,可以自定义
注意,BrowserRouter只能有一个子节点
BrowserRouter属性getUserConfirmation的使用例子
由于默认是用的window.confirm做验证,很丑,可以自己定义
使用必须导入Prompt这个组件是用来传递确认信息的
import React from 'react'
import ReactDOM from 'react-dom'
import { Prompt } from 'react-router'
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'
const MyComponent1 = () => (
<div>组件一</div>
)
const MyComponent2 = () => (
<div>组件二</div>
)
class MyComponent extends React.Component {
render() {
const getConfirmation = (message,callback) => {
const ConFirmComponent = () => (
<div>
{message}
<button onClick={() => {callback(true);ReactDOM.unmountComponentAtNode(document.getElementById('root1'))}}>确定</button>
<button onClick={() => {callback(false);ReactDOM.unmountComponentAtNode(document.getElementById('root1'))}}>取消</button>
</div>
)
ReactDOM.render(
<ConFirmComponent />,
document.getElementById('root1')
)
}
return (
<Router getUserConfirmation={getConfirmation}>
<div>
<Prompt message="Are you sure you want to leave?" />
<Link to="/a">跳转组件二</Link>
<Route component={MyComponent1}/>
<Route exact path="/a" component={MyComponent2}/>
</div>
</Router>
)
}
}
ReactDOM.render(
<MyComponent/>,
document.getElementById('root')
)
HashRouter,这个是用来兼容老浏览器的,略
Link
Link的作用和a标签类似
属性
to
接受path字符串,<Link to="/a" />
接受对象
<Link to={{
pathname: '/courses', // 传递的pathname
search: '?sort=name', // 传递的url参数
hash: '#the-hash', // 在url参数后面的hash值
state: { fromDashboard: true } // 自定义属性存在location中
}}/>
replace,设置为true,会取代当前历史记录
NavLink
NavLink和Link一样最终都是渲染成a标签,NavLink可以给这个a标签添加额外的属性
<NavLink to="/a">组件一</NavLink> 当点击此路由,a标签默认添加一个名为active的class
属性
activeClassName 用于自定义激活a标签的class
activeStyle 用于设置激活a标签的样式
activeStyle={{
fontWeight: 'bold',
color: 'red'
}}
exact,当路径百分百匹配的时候才展示样式和class,但是不影响路由的匹配,"/a"和"/a/" 是相等的
strict,这个比exact还很,就算 "/a"和"/a/" 也是不相等的
isActive,此属性接收一个回调函数,用来做跳转的最后拦截
<NavLink isActive={oddEvent} to="/a/123">组件一</NavLink>
const oddEvent = (match, location) => {
console.log(match,location)
if (!match) {
return false
}
console.log(match.id)
return true
}
match里面保存了路由匹配信息的参数,是动态化的
location里面保存的Link中的to传递的所有信息
location,此参数用来接受一个location对象,如果对象信息和当前的location信息对象匹配则跳转
<NavLink to="/a/123" location={{key:"mb5wu3",pathname:"/a/123"}}/>
Prompt
Prompt是用来提示用户是否要跳转,给用户提示信息默认使用window.confirm,可以结合getUserConfirmation构建自定义提示信息
import { Prompt } from 'react-router'
属性
message
传递字符串,用于提示用户的展示信息
传递函数,可以接受location对象作为参数
<Prompt message={location => {
console.log(location);
return true
}}/>
return true表示可以直接跳转,无需验证
return '你好'表示要给提示给用户的信息
when,接受一个布尔值,表示是否执行prompt
MemoryRouter
主要用于native端,路由历史不通过URL缓存,而是保存在内存中
也就是说,地址栏地址不变,而在内存中保存路由信息,当浏览器刷新时,自动跳回路由首页
还是可以通过访问location对象得到路由信息
import { MemoryRouter } from 'react-router'
属性
initialEntries 一个数组用来传递路由的初始匹配值
<MemoryRouter initialEntries={["/a","/b"]}>...</MemoryRouter>
数组成员可以是字符串也可以是location对象,成员的默认顺序是最左边的展示出来
initialIndex 用来确定initialEntries数组展示路由的索引
<MemoryRouter initialIndex={1} initialEntries={["/a","/b"]}>...</MemoryRouter>
getUserConfirmation 和上面讲的一样
keyLength 也是用来设置location.key的长度的
Redirect
路由重定向
import { Redirect } from 'react-router'
使用这个 <Redirect to="/a" /> 代替组件使用
属性
to
字符串,要重定向的路径
对象,location对象
push,布尔值,是否将当前路径存到history中(是Link标签的to路径)
from,用来指定路由的原始值,如果不是给定的字符串,那么不渲染,反之渲染,只能用于switch组件中
Route
Route的作用就是用来渲染路由匹配的组件
路由渲染有三种方式,每一种方式都可以传递match,location,history对象
component
用来渲染组件
<Route path="/a" component={MyComponent1}></Route>
render
用来渲染函数式组件,可以防止重复渲染组件
<Route path="/b" render={({match,location,history}) => {
console.log(match,location,history);
return <div>组件二</div>
}}></Route>
children
和render差不多,不过可以用来动态的展示组件
差别之处在于,children会在路径不匹配的时候也调用回调从而渲染函数,而render只会在路径匹配的时候触发回调
<Route path="/b" children={({match,location,history}) => {
return (
match ? <div>组件二</div>:<div>组件二二</div>
)
}}></Route>
属性
path,字符串,匹配的路径
exact,布尔值,路径完全匹配的时候跳转 "/a/"和"/a"是一样的
strict,布尔值,单独使用和没有使用这个属性没有任何区别,如果和exact一起使用可以构建更为精确的匹配模式。"/a/"和"/a"是不同的
location,传递route对象,和当前的route对象对比,如果匹配则跳转,如果不匹配则不跳转。另外,如果route包含在swicth组件中,如果route的location和switch的location匹配,那么route的location会被switch的location替代
Router
低级路由,适用于任何路由组件,主要和redux深度集成,使用必须配合history对象
使用Router路由的目的是和状态管理库如redux中的history同步对接
关于history插件的使用请看 http://www.cnblogs.com/ye-hcj/p/7741742.html
import { Router } from 'react-router'
import { createBrowserHistory } from 'history/createBrowserHistory'
const history = createBrowserHistory();
<Router history={history}>
...
</Router>
StaticRouter,静态路由,主要用于服务端渲染,暂不涉及
Switch
Switch组件内部可以是Route或者Redirect,只会渲染第一个匹配的元素
属性
location
Switch可以传递一个location对象,路由匹配将和这个location对象进行比较,而不是url
Route元素会比较path,Redirect会比较from,如果他们没有对应的属性,那么就直接匹配
history
这里的history对象是使用history插件生成的,http://www.cnblogs.com/ye-hcj/p/7741742.html已经详细讲过了
记住一点,再使用location做对比的使用,通过history访问的location是动态变化的,最好通过Route访问location
location
location对象表示当前的路由位置信息,主要包含如下属性
{
hash: undefined,
key: "k9r4i3",
pathname: "/c",
state: undefined,
search: ""
}
match
match对象表示当前的路由地址是怎么跳转过来的,包含的属性如下
{
isExact: true, // 表示匹配到当前路径是否是完全匹配
params: {}, // 表示路径的动态参数值
path: '/c', // 匹配到的原始路径
url: '/c' // 匹配到的实际路径
}
matchPath
matchPath也是和后端相关的,主要作用就是生成一个match对象
import { matchPath } from 'react-router'
const match = matchPath('/a/123',{
path: '/a/:id',
exact: true,
strict: false
})
第一个参数是pathname
第二个参数是一个对象,里面的属性和route的属性类似,用来和pathname做对比
如果匹配的话,就产生一个match对象,反之,null
withRouter
当一个非路由组件也想访问到当前路由的match,location,history对象,那么withRouter将是一个非常好的选择
import { withRouter } from 'react-router'
const MyComponent = (props) => {
const { match, location, history } = this.props
return (
<div>{props.location.pathname}</div>
)
}
const FirstTest = withRouter(MyComponent)
react-router4.x 组件和api介绍的更多相关文章
- 「小程序JAVA实战」小程序视频组件与api介绍(51)
转自:https://idig8.com/2018/09/22/xiaochengxujavashizhanxiaochengxushipinzujianyuapijieshao50/ 这次说下,小程 ...
- React Native之本地文件系统访问组件react-native-fs的介绍与使用
React Native之本地文件系统访问组件react-native-fs的介绍与使用 一,需求分析 1,需要将图片保存到本地相册: 2,需要创建文件,并对其进行读写 删除操作. 二,简单介绍 re ...
- <react> 组件的详细介绍:
<react> 组件的详细介绍: 思维导图: 代码介绍: TodoList:(组件) import React, { Component } from 'react' import Sty ...
- 当初要是看了这篇,React高阶组件早会了
当初要是看了这篇,React高阶组件早会了. 概况: 什么是高阶组件? 高阶部件是一种用于复用组件逻辑的高级技术,它并不是 React API的一部分,而是从React 演化而来的一种模式. 具体地说 ...
- React入门实例:组件化+react-redux实现网上商城(1)
项目运行 1.git clone https://github.com/soybeanxiaobi/React_demo_onlineShop 2.cd React_demo_onlineShop(文 ...
- 利用 React 高阶组件实现一个面包屑导航
什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...
- 微信小程序开发—快速掌握组件及API的方法
微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...
- React Native 之 组件化开发
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- 微信小程序开发—快速掌握组件及API的方法---转载
微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...
随机推荐
- Ansi 与 Unicode 字符串类型的互相转换
WideCharToMultiByte 实现宽字节转换到窄字节MultiByteToWideChar 实现窄字节转换到宽字节 WideCharToMultiByte 的代码页用来标记与新转换的字符串相 ...
- Java -- 利用反射 操作任意数组,包括对象数组 和 基本数据类型的数组
items为任意数组
- DelphiXE_Android
1. http://download.csdn.net/detail/gx15941883020/8104761 2. http://bbs.2ccc.com/topic.asp?topicid=45 ...
- mysql: instr 多个字段 like数据
你是否一直在寻找比MySQL的LIKE语句更高效的方法的,下面我就为你介绍几种. SELECT * FROM `order_shop` where instr(uuid, 'b') > 0 g ...
- Hbase 使用方法
列出所有 table¶ hbase(main):> list 新增 table¶ A . 直接增加一個表 t2 hbase(main):> create 't2' B . 增加一個擁有 ' ...
- hive_学习_02_hive整合hbase(失败)
一.前言 本文承接上一篇:hive_学习_01_hive环境搭建(单机) ,主要是记录 hive 整合hbase的流程 二.环境准备 1.环境准备 操作系统 : linux CentOS 6.8 jd ...
- UnityGUI扩展实例:图片挖洞效果 Mask的反向实现
转载自 https://www.taidous.com/forum.php?mod=viewthread&fid=211&tid=55259 我想大家在用uGUI做界面时,可能经常会碰 ...
- 剑指Offer-翻转单词顺序
题目描述: 输入一个英文句子,翻转句子中单词的顺序,但单词内字符串的顺序不变.例如输入字符串:"I am a student",则输出"student a am I&qu ...
- Agc001_D Arrays and Palindrome
传送门 题目大意 给定一个元素和为$N$的有$M$个数的序列$A$,请你可以$A$元素排列的顺序,并需要构造一个有$K$个($K$可以自己定)数的数列,使得任意一个长度为$N$的字符串,若满足:前$A ...
- ZOJ - 3201 Tree of Tree (树形背包)
题意:有一棵树,树上每个结点都有一个权值,求恰好包含k个结点的子树的最大权值. 设dp[i][j]为以结点i为根的树中包含j个结点的子树的最大权值,则可以把这个结点下的每棵子树中所包含的所有子树的大小 ...