react-router实用4.2.0

react-router非常复杂整体,比vue-router强大很多,好好研究,对你自身能力提高很有帮助

  1. 安装

    1. cnpm install react-router --save 包含react router核心
    2. cnpm install react-router-dom --save 包含react routerdom绑定
  2. BrowserRouter

    1. BrowserRouterreact路由的容器
    2. 相关属性如下
    3. basename,用来设置路由的基础链接,<BrowserRouter basename="/api" />
    4. getUserConfirmation,用来拦截Prompt组件,并且决定是否跳转,我专门做了一个例子
    5. forceRefresh,用来设置是否强制浏览器整体刷新,默认是false
    6. keLength,用来设置location.key的长度,默认是6,可以自定义
    7. 注意,BrowserRouter只能有一个子节点
  3. BrowserRouter属性getUserConfirmation的使用例子

    1. 由于默认是用的window.confirm做验证,很丑,可以自己定义
    2. 使用必须导入Prompt这个组件是用来传递确认信息的
    3. import React from 'react'
    4. import ReactDOM from 'react-dom'
    5. import { Prompt } from 'react-router'
    6. import {
    7. BrowserRouter as Router,
    8. Route,
    9. Link
    10. } from 'react-router-dom'
    11. const MyComponent1 = () => (
    12. <div>组件一</div>
    13. )
    14. const MyComponent2 = () => (
    15. <div>组件二</div>
    16. )
    17. class MyComponent extends React.Component {
    18. render() {
    19. const getConfirmation = (message,callback) => {
    20. const ConFirmComponent = () => (
    21. <div>
    22. {message}
    23. <button onClick={() => {callback(true);ReactDOM.unmountComponentAtNode(document.getElementById('root1'))}}>确定</button>
    24. <button onClick={() => {callback(false);ReactDOM.unmountComponentAtNode(document.getElementById('root1'))}}>取消</button>
    25. </div>
    26. )
    27. ReactDOM.render(
    28. <ConFirmComponent />,
    29. document.getElementById('root1')
    30. )
    31. }
    32. return (
    33. <Router getUserConfirmation={getConfirmation}>
    34. <div>
    35. <Prompt message="Are you sure you want to leave?" />
    36. <Link to="/a">跳转组件二</Link>
    37. <Route component={MyComponent1}/>
    38. <Route exact path="/a" component={MyComponent2}/>
    39. </div>
    40. </Router>
    41. )
    42. }
    43. }
    44. ReactDOM.render(
    45. <MyComponent/>,
    46. document.getElementById('root')
    47. )
  4. HashRouter,这个是用来兼容老浏览器的,略

  5. Link

    1. Link的作用和a标签类似
    2. 属性
    3. to
    4. 接受path字符串,<Link to="/a" />
    5. 接受对象
    6. <Link to={{
    7. pathname: '/courses', // 传递的pathname
    8. search: '?sort=name', // 传递的url参数
    9. hash: '#the-hash', // 在url参数后面的hash值
    10. state: { fromDashboard: true } // 自定义属性存在location中
    11. }}/>
    12. replace,设置为true,会取代当前历史记录
  6. NavLink

    1. NavLinkLink一样最终都是渲染成a标签,NavLink可以给这个a标签添加额外的属性
    2. <NavLink to="/a">组件一</NavLink> 当点击此路由,a标签默认添加一个名为activeclass
    3. 属性
    4. activeClassName 用于自定义激活a标签的class
    5. activeStyle 用于设置激活a标签的样式
    6. activeStyle={{
    7. fontWeight: 'bold',
    8. color: 'red'
    9. }}
    10. exact,当路径百分百匹配的时候才展示样式和class,但是不影响路由的匹配,"/a""/a/" 是相等的
    11. strict,这个比exact还很,就算 "/a""/a/" 也是不相等的
    12. isActive,此属性接收一个回调函数,用来做跳转的最后拦截
    13. <NavLink isActive={oddEvent} to="/a/123">组件一</NavLink>
    14. const oddEvent = (match, location) => {
    15. console.log(match,location)
    16. if (!match) {
    17. return false
    18. }
    19. console.log(match.id)
    20. return true
    21. }
    22. match里面保存了路由匹配信息的参数,是动态化的
    23. location里面保存的Link中的to传递的所有信息
    24. location,此参数用来接受一个location对象,如果对象信息和当前的location信息对象匹配则跳转
    25. <NavLink to="/a/123" location={{key:"mb5wu3",pathname:"/a/123"}}/>
  7. Prompt

    1. Prompt是用来提示用户是否要跳转,给用户提示信息默认使用window.confirm,可以结合getUserConfirmation构建自定义提示信息
    2. import { Prompt } from 'react-router'
    3. 属性
    4. message
    5. 传递字符串,用于提示用户的展示信息
    6. 传递函数,可以接受location对象作为参数
    7. <Prompt message={location => {
    8. console.log(location);
    9. return true
    10. }}/>
    11. return true表示可以直接跳转,无需验证
    12. return '你好'表示要给提示给用户的信息
    13. when,接受一个布尔值,表示是否执行prompt
  8. MemoryRouter

    1. 主要用于native端,路由历史不通过URL缓存,而是保存在内存中
    2. 也就是说,地址栏地址不变,而在内存中保存路由信息,当浏览器刷新时,自动跳回路由首页
    3. 还是可以通过访问location对象得到路由信息
    4. import { MemoryRouter } from 'react-router'
    5. 属性
    6. initialEntries 一个数组用来传递路由的初始匹配值
    7. <MemoryRouter initialEntries={["/a","/b"]}>...</MemoryRouter>
    8. 数组成员可以是字符串也可以是location对象,成员的默认顺序是最左边的展示出来
    9. initialIndex 用来确定initialEntries数组展示路由的索引
    10. <MemoryRouter initialIndex={1} initialEntries={["/a","/b"]}>...</MemoryRouter>
    11. getUserConfirmation 和上面讲的一样
    12. keyLength 也是用来设置location.key的长度的
  9. Redirect

    1. 路由重定向
    2. import { Redirect } from 'react-router'
    3. 使用这个 <Redirect to="/a" /> 代替组件使用
    4. 属性
    5. to
    6. 字符串,要重定向的路径
    7. 对象,location对象
    8. push,布尔值,是否将当前路径存到history中(是Link标签的to路径)
    9. from,用来指定路由的原始值,如果不是给定的字符串,那么不渲染,反之渲染,只能用于switch组件中
  10. Route

    1. Route的作用就是用来渲染路由匹配的组件
    2. 路由渲染有三种方式,每一种方式都可以传递match,location,history对象
    3. component
    4. 用来渲染组件
    5. <Route path="/a" component={MyComponent1}></Route>
    6. render
    7. 用来渲染函数式组件,可以防止重复渲染组件
    8. <Route path="/b" render={({match,location,history}) => {
    9. console.log(match,location,history);
    10. return <div>组件二</div>
    11. }}></Route>
    12. children
    13. render差不多,不过可以用来动态的展示组件
    14. 差别之处在于,children会在路径不匹配的时候也调用回调从而渲染函数,而render只会在路径匹配的时候触发回调
    15. <Route path="/b" children={({match,location,history}) => {
    16. return (
    17. match ? <div>组件二</div>:<div>组件二二</div>
    18. )
    19. }}></Route>
    20. 属性
    21. path,字符串,匹配的路径
    22. exact,布尔值,路径完全匹配的时候跳转 "/a/""/a"是一样的
    23. strict,布尔值,单独使用和没有使用这个属性没有任何区别,如果和exact一起使用可以构建更为精确的匹配模式。"/a/""/a"是不同的
    24. location,传递route对象,和当前的route对象对比,如果匹配则跳转,如果不匹配则不跳转。另外,如果route包含在swicth组件中,如果routelocationswitchlocation匹配,那么routelocation会被switchlocation替代
  11. Router

    1. 低级路由,适用于任何路由组件,主要和redux深度集成,使用必须配合history对象
    2. 使用Router路由的目的是和状态管理库如redux中的history同步对接
    3. 关于history插件的使用请看 http://www.cnblogs.com/ye-hcj/p/7741742.html
    4. import { Router } from 'react-router'
    5. import { createBrowserHistory } from 'history/createBrowserHistory'
    6. const history = createBrowserHistory();
    7. <Router history={history}>
    8. ...
    9. </Router>
  12. StaticRouter,静态路由,主要用于服务端渲染,暂不涉及

  13. Switch

    1. Switch组件内部可以是Route或者Redirect,只会渲染第一个匹配的元素
    2. 属性
    3. location
    4. Switch可以传递一个location对象,路由匹配将和这个location对象进行比较,而不是url
    5. Route元素会比较pathRedirect会比较from,如果他们没有对应的属性,那么就直接匹配
  14. history

    1. 这里的history对象是使用history插件生成的,http://www.cnblogs.com/ye-hcj/p/7741742.html已经详细讲过了
    2. 记住一点,再使用location做对比的使用,通过history访问的location是动态变化的,最好通过Route访问location
  15. location

    1. location对象表示当前的路由位置信息,主要包含如下属性
    2. {
    3. hash: undefined,
    4. key: "k9r4i3",
    5. pathname: "/c",
    6. state: undefined,
    7. search: ""
    8. }
  16. match

    1. match对象表示当前的路由地址是怎么跳转过来的,包含的属性如下
    2. {
    3. isExact: true, // 表示匹配到当前路径是否是完全匹配
    4. params: {}, // 表示路径的动态参数值
    5. path: '/c', // 匹配到的原始路径
    6. url: '/c' // 匹配到的实际路径
    7. }
  17. matchPath

    1. matchPath也是和后端相关的,主要作用就是生成一个match对象
    2. import { matchPath } from 'react-router'
    3. const match = matchPath('/a/123',{
    4. path: '/a/:id',
    5. exact: true,
    6. strict: false
    7. })
    8. 第一个参数是pathname
    9. 第二个参数是一个对象,里面的属性和route的属性类似,用来和pathname做对比
    10. 如果匹配的话,就产生一个match对象,反之,null
  18. withRouter

    1. 当一个非路由组件也想访问到当前路由的match,location,history对象,那么withRouter将是一个非常好的选择
    2. import { withRouter } from 'react-router'
    3. const MyComponent = (props) => {
    4. const { match, location, history } = this.props
    5. return (
    6. <div>{props.location.pathname}</div>
    7. )
    8. }
    9. const FirstTest = withRouter(MyComponent)

react-router4.x 组件和api介绍的更多相关文章

  1. 「小程序JAVA实战」小程序视频组件与api介绍(51)

    转自:https://idig8.com/2018/09/22/xiaochengxujavashizhanxiaochengxushipinzujianyuapijieshao50/ 这次说下,小程 ...

  2. React Native之本地文件系统访问组件react-native-fs的介绍与使用

    React Native之本地文件系统访问组件react-native-fs的介绍与使用 一,需求分析 1,需要将图片保存到本地相册: 2,需要创建文件,并对其进行读写 删除操作. 二,简单介绍 re ...

  3. <react> 组件的详细介绍:

    <react> 组件的详细介绍: 思维导图: 代码介绍: TodoList:(组件) import React, { Component } from 'react' import Sty ...

  4. 当初要是看了这篇,React高阶组件早会了

    当初要是看了这篇,React高阶组件早会了. 概况: 什么是高阶组件? 高阶部件是一种用于复用组件逻辑的高级技术,它并不是 React API的一部分,而是从React 演化而来的一种模式. 具体地说 ...

  5. React入门实例:组件化+react-redux实现网上商城(1)

    项目运行 1.git clone https://github.com/soybeanxiaobi/React_demo_onlineShop 2.cd React_demo_onlineShop(文 ...

  6. 利用 React 高阶组件实现一个面包屑导航

    什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...

  7. 微信小程序开发—快速掌握组件及API的方法

    微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...

  8. React Native 之 组件化开发

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  9. 微信小程序开发—快速掌握组件及API的方法---转载

    微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...

随机推荐

  1. Ansi 与 Unicode 字符串类型的互相转换

    WideCharToMultiByte 实现宽字节转换到窄字节MultiByteToWideChar 实现窄字节转换到宽字节 WideCharToMultiByte 的代码页用来标记与新转换的字符串相 ...

  2. Java -- 利用反射 操作任意数组,包括对象数组 和 基本数据类型的数组

    items为任意数组

  3. DelphiXE_Android

    1. http://download.csdn.net/detail/gx15941883020/8104761 2. http://bbs.2ccc.com/topic.asp?topicid=45 ...

  4. mysql: instr 多个字段 like数据

    你是否一直在寻找比MySQL的LIKE语句更高效的方法的,下面我就为你介绍几种. SELECT * FROM `order_shop` where instr(uuid,  'b') > 0 g ...

  5. Hbase 使用方法

    列出所有 table¶ hbase(main):> list 新增 table¶ A . 直接增加一個表 t2 hbase(main):> create 't2' B . 增加一個擁有 ' ...

  6. hive_学习_02_hive整合hbase(失败)

    一.前言 本文承接上一篇:hive_学习_01_hive环境搭建(单机) ,主要是记录 hive 整合hbase的流程 二.环境准备 1.环境准备 操作系统 : linux CentOS 6.8 jd ...

  7. UnityGUI扩展实例:图片挖洞效果 Mask的反向实现

    转载自 https://www.taidous.com/forum.php?mod=viewthread&fid=211&tid=55259 我想大家在用uGUI做界面时,可能经常会碰 ...

  8. 剑指Offer-翻转单词顺序

    题目描述: 输入一个英文句子,翻转句子中单词的顺序,但单词内字符串的顺序不变.例如输入字符串:"I am a student",则输出"student a am I&qu ...

  9. Agc001_D Arrays and Palindrome

    传送门 题目大意 给定一个元素和为$N$的有$M$个数的序列$A$,请你可以$A$元素排列的顺序,并需要构造一个有$K$个($K$可以自己定)数的数列,使得任意一个长度为$N$的字符串,若满足:前$A ...

  10. ZOJ - 3201 Tree of Tree (树形背包)

    题意:有一棵树,树上每个结点都有一个权值,求恰好包含k个结点的子树的最大权值. 设dp[i][j]为以结点i为根的树中包含j个结点的子树的最大权值,则可以把这个结点下的每棵子树中所包含的所有子树的大小 ...