react-router不像vue-router一样有很多钩子函数,可以做路由守卫。想实现路由守卫,可以用高阶组件来实现。

@connect(state => ({ isLogin: state.user.isLogin }))
class PrivateRoute extends Component {
render() {
const { isLogin, component: Component, ...rest } = this.props;
///Route组件里render和Component二选一
return (
<Route
{...rest}
//props 包含值:history,location,match
//login 页面可以通过 this.props.location.state.from知道是哪个页面跳转过来的,方便登录后直接跳转
render={props =>
isLogin ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: "/login",
state: { from: props.location.pathname }
}}
/>
)
}
/>
);
}
}

react用高阶组件实现路由守卫的更多相关文章

  1. 【转】react的高阶组件

    React进阶之高阶组件   前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只 ...

  2. react.js 高阶组件----很简单的实例理解高阶组件思想

    调试代码之前,我设置了两个缓存 分别是username和content 在控制台console设置两个缓存代码 localStorage.setItem('username','老王')localSt ...

  3. react之高阶组件(二)

    高阶组件的使用 接上文———— 一.像函数一样直接调用 import React, { Component } from 'react' import A from './A' class C ext ...

  4. React 之 高阶组件的理解

    1.基本概念 高阶组件是参数为组件,返回值为新组件的函数. 2.举例说明 ① 装饰工厂模式 组件是 react 中的基本单元,组件中通常有一些逻辑(非渲染)需要复用处理.这里我们可以用高阶组件对组件内 ...

  5. react之高阶组件(一)

    当两个或多个组件有相同的地方,可以将相同的部分抽离出来 先创建三个组件A.B.C A.js import React, { Component } from 'react' class A exten ...

  6. React高阶组件总结

    在多个不同的组件中需要用到相同的功能,这个解决方法,通常有Mixin和高阶组件. Mixin方法例如: //给所有组件添加一个name属性 var defaultMixin = { getDefaul ...

  7. React中的高阶组件,无状态组件,PureComponent

    1. 高阶组件 React中的高阶组件是一个函数,不是一个组件. 函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件.相当于将输入的React组件进行了一些增强.React的 ...

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

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

  9. react高阶组件的一些运用

    今天学习了react高阶组件,刚接触react学习起来还是比较困难,和大家分享一下今天学习的知识吧,另外缺少的地方欢迎补充哈哈 高阶组件(Higher Order Components,简称:HOC) ...

随机推荐

  1. arcgis python 获得表字段的唯一值

    #获得唯一值 by gisoracle def getuniqueValue(inTable,inField): rows = arcpy.da.SearchCursor(inTable,[inFie ...

  2. cmder的segmentation fault错误修复

    Segmentation fault 现场还原 问题出现的原因是我在 cmder的命令行里执行了cmder /register ALL命令,本意是把cmder放到右键菜单里去的 但我没想到的是,各种不 ...

  3. Windows 7开发:UAC数据重定向 - Win32 Native

    Windows 7开发:UAC数据重定向 - Win32 Native 目标 本动手实验中,您将会学习如何: • 故障排除一个文件重定向 问题 • 使用Process Monitor查找引起问题的根本 ...

  4. oracle启动过程2

    5个目标点(知识点)环境说明,连接实例,hash运算dbs目录文件解释参数文件解释启动过程三阶段实战演练 本次课程目标是讲解oracle实例的启动过程首先了解一下本次实验环境    之前已经创建好了一 ...

  5. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_01-vuejs研究-vuejs介绍

    1.vue.js是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计 为可以自底向上逐层应用.Vue 的核心库只关注视 ...

  6. http://www.cda.cn/view/25735.html

    通过实例浅析Python对比C语言的编程思想差异 我一直使用 Python,用它处理各种数据科学项目. Python 以易用闻名.有编码经验者学习数天就能上手(或有效使用它). 听起来很不错,不过,如 ...

  7. JQ也要面向对象~在JQ中扩展静态方法和实例方法(jq扩展方法)

    JQ也要面向对象,事实上,无论哪种开发语言,在开发功能时,都要把面向对象拿出来,用它的思想去干事,去理解事,面向对象会使问题简单化,清晰化,今天说两个概念“静态方法”与“实现方法”,这个在面向对象的语 ...

  8. Jmeter 逻辑控制器 之 While Controller

    一.认识 While Controller 如下图,创建一个While Controller (While 循环控制器) 设置界面如下: Condition (function or variable ...

  9. java中volatile关键字的作用

    一.内存模型的相关概念 大家都知道,计算机在执行程序时,每条指令都是在CPU中执行的,而执行指令过程中,势必涉及到数据的读取和写入.由于程序运行过程中的临时数据是存放在主存(物理内存)当中的,这时就存 ...

  10. *#【Python】【基础知识】【运算符】【Python的几类运算符】

    Python的运算符分为以下几类: 算术运算符比较(关系)运算符赋值运算符逻辑运算符位运算符成员运算符身份运算符 以及需要考虑的:运算符优先级 一.算术运算符: 需要注意的,上图是Python 2.0 ...