react中一切皆组件--2018.7.

目标:自定义user界面的前置路由守卫,当用户点击要进入user组件时,路由守卫发起判断,如果条件满足则进入,否则跳转至login组件。

.入口文件index.js中代码如下:

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import Home from './routes/home'
import {BrowserRouter,Route,Switch,Redirect,NavLink} from 'react-router-dom'
import User from './routes/user';
import Login from './routes/login';
import List from './routes/list';
import Error from './routes/error'
import Authuser from './routes/authuser'
import './assets/link.css'
class App extends Component{
render(){
return (
<div>
<NavLink activeClassName="link" to="/home" >Home</NavLink>
<NavLink activeClassName="link" to="/user" >User</NavLink>
<NavLink activeClassName="link" to="/login" >Login</NavLink>
<NavLink activeClassName="link" to="/list" >List</NavLink>
<NavLink activeClassName="link" to="/error" >Error</NavLink>
<Switch>
<Redirect exact from='/' to='/home' />
<Route path="/home" component={Home}/>
<Authuser path='/user' component={User}/>
<Route path="/login" component={Login}/>
<Route path="/list" component={List}/>
<Route path='/error' component={Error} />
<Route component={Error} />
</Switch>
</div>
)
}
}
ReactDOM.render(
<BrowserRouter >
<Route component={App}/>
</BrowserRouter>,
document.getElementById('root'));
registerServiceWorker(); 其中authuser是我们自定义的组件,当给组件添加path和component两个props后,这个组件会被识别为一个route,因此点击User链接后,会触发Authuser组件 .Authuser的代码如下:
import React,{Component} from 'react';
import {Route,Redirect} from 'react-router-dom' //函数式组件的写法
// let Authuser = ({component:Component,...rest})=>{
// return <Route {...rest} render={(props)=>{
// return Math.random() <0.5 ? <Component {...props}/> : <Redirect to='/login' /> // }}/>
// } //类组件的写法
class Authuser extends Component{
constructor(){
super()
this.state={
hasReq:false,
authuser:false,
username:"",
data:{}
}
}
componentDidMount(){
//组件挂载完毕之后异步读取数据,并更新state
fetch(
`/data/data.json`
).then(
(res)=>{
return res.json()
}
).then((res)=>{
this.setState(
{
hasReq:true,
authuser:res.authuser,
username:res.id,
data:res.password
}
)
})
}
render(){
let {component:Component,...rest} = this.props
//解构组件身上的props,将component单独拿出来,如果条件满足,则允许进入该component,将剩余参数放入rest,rest是一个对象
//此处Component == User
if (!this.state.hasReq) {return null}
//组件被触发后会首先渲染一次,但此时state中的hasReq状态未被更新,当此处hasReq未被更新时,我们先不渲染页面,直到组件挂载完毕异步操作返回结果并更新state中的数据后,我们再执行下一步操作
return (
//组件最终返回的仍然是一个Route
<Route {...rest} render={(props)=>{
//将传递进来的props展开传给Route组件,render函数接收参数props并进行一系列判断,决定路由跳转至哪个组件,同时可以将props继续向下传递
return (this.state.authuser?<Component {...props} username={this.state.username}/> : <Redirect to='/login' /> )
}}/>
)
}
}
export default Authuser

摘抄保存用的 非原创

react前置路由守卫的更多相关文章

  1. vue-router4 |name的作用|query传参|parmas传参|动态路由参数|命名视图|别名alias|前置路由守卫|路由过渡效果|滚动行为

    vue-router4 出现 No match found for location with path "/" #### router/index.ts文件 import { c ...

  2. 解决vue组件内前置路由守卫beforeRouteEnter无法获取上下文this

    问题描述 vue框架,只有在报名页面报名成功,然后自动跳转到订单详情,才弹出一个引流弹窗,其他情况均不弹出,我就想到使用vue 的组件内前置守卫beforeRouteEnter来实现.beforeRo ...

  3. react router @4 和 vue路由 详解(七)react路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 12.react路由守卫? a.在之前的版本中,React Router 也提供了类似的 ...

  4. React Router 4.0 实现路由守卫

    在使用 Vue 或者 Angular 的时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的 beforeEnter 函 ...

  5. react router @4 和 vue路由 详解(八)vue路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...

  6. react用高阶组件实现路由守卫

    react-router不像vue-router一样有很多钩子函数,可以做路由守卫.想实现路由守卫,可以用高阶组件来实现. @connect(state => ({ isLogin: state ...

  7. vue2.0 实现导航守卫(路由守卫)

    路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫 ...

  8. vue路由守卫应用,监听是否登录

    路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫 ...

  9. vue-router钩子函数实现路由守卫

    接上一篇,我们一起学习了vue路由的基本使用以及动态路由.路由嵌套以及路由命名等知识,今天我们一起来学习记录vue-router的钩子函数实现路由守卫: 何为路由守卫?路由守卫有点类似于ajax的请求 ...

随机推荐

  1. HTTP常用状态码大全

    HTTP状态码对照表 HTTP response codes 当浏览者访问一个网页时,浏览者的浏览器会向网页所在服务器发出请求.当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含HTTP状态码 ...

  2. “三八节”如何做好EDM邮件营销

    阳春三月,乍暖还寒,万物复苏,一年一度的三八节也马上来临了,各路商家都开足马力,掀起了一股美丽的旋风.如今酒香也怕巷子深,要想取得良好的营销效果,就得早早动手,赚足眼球,才会换来节日当天的丰厚回馈.U ...

  3. windows下libevent的编译及使用

    之前简单分析了libevent的源码,过了一段时间要用的时候发现完全忘记了..从头记录一下流程 1.编译 可以从github下载libevent的压缩包,解压后 修改以下三个文件,添加宏定义: 在以下 ...

  4. IntelliJ IDEA 2017.3-2018.1 全系列汉化包

    JetBrains 系列软件汉化包 关键字: Android Studio 3.0-3.1 汉化包 GoLand 2017.3.2-2018.1 汉化包 IntelliJ IDEA 2017.3-20 ...

  5. 4.spriing:Bean的生命周期/工厂方法配置Bean/FactoryBean

    1.Bean的生命周期 scope:singleton/prototype 1)spring容器管理singleton作用的生命周期,spring能够精确知道Bean合适创建,何时初始化完成,以及何时 ...

  6. Faster Alternatives to glReadPixels and glTexImage2D in OpenGL ES

    In the development of Shou, I’ve been using GLSL with NEON to manipulate image rotation, scaling and ...

  7. Android平台上PMEM的使用及Platform设备注册(一)

    Android中PMEM驱动程序是物理内存的驱动程序,可用于分配物理内存.PMEM在camera和video系统中频繁使用.下面,简单记录一下PMEM的使用方法.另外,由于PMEM设备做为Platfo ...

  8. 关于swing界面label和button的动态设置文字

    在引入发送验证码功能后,想让button的文本动态变化,发现如下方法并不能做到: int limitSec=10; while(limitSec>0){ sendyzhm.setEnabled( ...

  9. jquery获取所有选中的checkbox

    获取所有name为spCodeId的checkbox var spCodesTemp = "";       $("input:checkbox[name=spCodeI ...

  10. WinFrom开发小案例

    C# 开发环境: VisualStudio2015 数据库: SQLserver2008 程序主界面: 注释: lbl标签: 程序中的lbl标签:编号.人数.姓名.性别.请输入要查询的信息,这里他们只 ...