react用高阶组件实现路由守卫
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用高阶组件实现路由守卫的更多相关文章
- 【转】react的高阶组件
React进阶之高阶组件 前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只 ...
- react.js 高阶组件----很简单的实例理解高阶组件思想
调试代码之前,我设置了两个缓存 分别是username和content 在控制台console设置两个缓存代码 localStorage.setItem('username','老王')localSt ...
- react之高阶组件(二)
高阶组件的使用 接上文———— 一.像函数一样直接调用 import React, { Component } from 'react' import A from './A' class C ext ...
- React 之 高阶组件的理解
1.基本概念 高阶组件是参数为组件,返回值为新组件的函数. 2.举例说明 ① 装饰工厂模式 组件是 react 中的基本单元,组件中通常有一些逻辑(非渲染)需要复用处理.这里我们可以用高阶组件对组件内 ...
- react之高阶组件(一)
当两个或多个组件有相同的地方,可以将相同的部分抽离出来 先创建三个组件A.B.C A.js import React, { Component } from 'react' class A exten ...
- React高阶组件总结
在多个不同的组件中需要用到相同的功能,这个解决方法,通常有Mixin和高阶组件. Mixin方法例如: //给所有组件添加一个name属性 var defaultMixin = { getDefaul ...
- React中的高阶组件,无状态组件,PureComponent
1. 高阶组件 React中的高阶组件是一个函数,不是一个组件. 函数的入参有一个React组件和一些参数,返回值是一个包装后的React组件.相当于将输入的React组件进行了一些增强.React的 ...
- 利用 React 高阶组件实现一个面包屑导航
什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...
- react高阶组件的一些运用
今天学习了react高阶组件,刚接触react学习起来还是比较困难,和大家分享一下今天学习的知识吧,另外缺少的地方欢迎补充哈哈 高阶组件(Higher Order Components,简称:HOC) ...
随机推荐
- Axure实现提示文本单击显示后自动消失的效果
Axure实现提示文本单击显示后自动消失的效果 方法/步骤 如图所示,框出的部分为提示文本(已经命名为tooltip),希望达到的效果是默认加载时不显示,点击帮助图标后显示,且2秒后自动消失. ...
- 预编译头文件stdafx.h-stdafx.cpp-stdafx.pch(pre-compile headfile)
tdafx的英文全称为:Standard Application Framework Extensions(标准应用程序框架的扩展). 所谓头文件预编译,就是把一个工程(Project)中使用的一些M ...
- <JavaScript> 稳妥构造函数模式与工厂模式的区别
稳妥构造函数模式的代码应该是这样的: function Person(name, age, job) { var o = new Object(); // private members var na ...
- ELK的安全解决方案 X-Pack(1)
安装 X-Pack 前必须安装 elasticsearch. Kibana.logstash,因为之前安装ELK选择的版本都是5.4.1,所以这次选择X-Pack的版本也要是5.4.1的 第一步:下载 ...
- protobuf ubuntu 18.04环境下安装
(t20190518) luo@luo-All-Series:~/MyFile$ (t20190518) luo@luo-All-Series:~/MyFile$ (t20190518) luo@lu ...
- Linux 全盘搜索关键字
grep -Ern -o '(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25 ...
- Vue打包文件放在服务器后,浏览器存在缓存问题
每次打包更新版本发到服务器上,导致偶尔会出现不能即使更新最新代码,浏览器存在缓存的问题. 解决方法:找到webpack .prod.conf.js 1.定义版本变量: const Version = ...
- mvn安装
先安装jdk.jre,maven需要jdk.jre支持 1.安装 jdk 卸载自带jdk rpm -qa | grep jdk rpm -e --nodeps 下载 JDK JDK 下载地址:http ...
- 让SNIPER-MXNet从标准的COCO格式数据集中直接使用file_name作为图片路径
告别项目中“依index生成路径”的方法,直接使用我们在生成.json标签时就已经写入的图片路径(这里我写入的是绝对路径 full path)来获取图片. 需要做的,用以下代码替换SNIPER/lib ...
- Spring 工程分层