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. IDEA版本控制工具VCS中使用Git,以及快捷键总结(不使用命令)

    场景介绍: 工作中多人使用版本控制软件协作开发,常见的应用场景归纳如下: 假设小组中有两个人,组长小张,组员小袁 场景一:小张创建项目并提交到远程Git仓库 场景二:小袁从远程Git仓库上获取项目源码 ...

  2. vi启动时报错:YouCompleteMe unavailable: requires Vim 7.4.1578+如何处理?

    答:源码编译安装最新的vim 以redhat为例: 1. 移除旧的vi,vim sudo yum remove vi vim -y 2. 安装ncurses库 sudo yum install ncu ...

  3. Android:高通平台性能调试

    1.GPU / CPU 信息打印脚本 gpu_cpu_info.bat @echo off echo "==================GPU====================== ...

  4. JAVA 基础编程练习题21 【程序 21 求阶乘】

    21 [程序 21 求阶乘] 题目:求 1+2!+3!+...+20!的和 程序分析:此程序只是把累加变成了累乘. package cskaoyan; public class cskaoyan21 ...

  5. 在DELPHI中用TreeView控件从数据库中动态装载信息

    1.PInfo表结构ID VARCHAR(50)FullName VARCHAR(50)ParentID VARCHAR(50) 2.Unit文件unit Info; interface uses  ...

  6. 跨域form下载方式 批量下载

    downloadFileForm:function(fid) { var url = "https://file.xxxx.com/fileDownload.do"; var in ...

  7. 牛客竞赛(gcd,快速幂)

    一.最大公约数和最小公倍数问题 题目描述: 输入2个正整数x0,y0(2<=x0<100000,2<=y0<=1000000),求出满足下列条件的P,Q的个数. 条件:1.P, ...

  8. vue项目富文本编辑器vue-quill-editor之自定义图片上传

    使用富文本编辑器的第一步肯定是先安装依赖 npm i vue-quill-editor 1.如果按照官网富文本编辑器中的图片上传是将图片转为base64格式的,如果需要上传图片到自己的服务器,需要修改 ...

  9. fzu1704(高斯消元法解异或方程组+高精度输出)

    题目链接:https://vjudge.net/problem/FZU-1704 题意:经典开关问题,求使得灯全0的方案数. 思路:题目保证至少存在一种方案,即方程组一定有解,那么套上高斯消元法的板子 ...

  10. [转帖]SPARC简介

    https://www.cnblogs.com/chaohm/p/5674886.html 1.    概述 SPARC(Scalable Processor ARChitecture,可扩展处理器架 ...