使用react-router4.0实现重定向和404功能的方法


Posted in Javascript onAugust 28, 2017

在开发中,重定向和404这种需求非常常见,使用React-router4.0可以使用Redirect进行重定向

最常用的就是用户登录之后自动跳转主页。

import React, { Component } from 'react';
import axios from 'axios';
import { Redirect } from 'react-router-dom';

class Login extends Component{
 constructor(){
  super();
  this.state = {value: '', logined: false};
  this.handleChange = this.handleChange.bind(this);
  this.toLogin = this.toLogin.bind(this);
 }
 handleChange(event) {
  this.setState({value: event.target.value})
 }

 toLogin(accesstoken) {
  axios.post('yoururl',{accesstoken})
   .then((res) => {
    this.setState({logined: true});
   })
 }

 render() {
  if(this.props.logined) {
   return (
    <Redirect to="/user"/>
   )
  }
  return (
   <div>
     <input type="text" value={this.state.value} onChange={this.handleChange} />
     <a onClick={() => { this.toLogin(this.state.value) }}>登录</a>
   </div>
  )
 }
}

export default Login;

以上这个示例仅仅是将登录的状态作为组件的state使用和维护的,在实际开发中,是否登录的状态应该是全局使用的,因此这时候可能你会需要考虑使用redux等这些数据状态管理库,方便我们做数据的管理。这里需要注意的使用传统的登录方式使用cookie存储无序且复杂的sessionID之类的来储存用户的信息,使用token的话,返回的可能是用户信息,此时可以考虑使用sessionStorage、localStorage来储存用户信息(包括头像、用户名等),此时书写reducer时需要指定初始状态从存储中获取,如:

const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
const LOGIN_FAILED = 'LOGIN_FAILED';
const LOGINOUT = 'LOGINOUT';

const Login = function(state, action) {
 if(!state) {
  console.log('state');
  if(sessionStorage.getItem('usermsg')) {
   return {
    logined: true,
    usermsg: JSON.parse(sessionStorage.getItem('usermsg'))
   }
  }
  return {
   logined: false,
   usermsg: {}
  }
 }
 switch(action.type) {
  case LOGIN_SUCCESS:
   return {logined: true,usermsg: action.usermsg};
  case LOGIN_FAILED:
   return {logined: false,usermsg:{}};
  case LOGINOUT:
   return {logined: false, usermsg: {}};
  default:
   return state
 }
};

export default Login;

指定404页面也非常简单,只需要在路由系统最后使用Route指定404页面的component即可

<Switch>
 <Route path="/" exact component={Home}/>
 <Route path="/user" component={User}/>
 <Route component={NoMatch}/>
</Switch>

当路由指定的所有路径没有匹配时,就会加载这个NoMatch组件,也就是404页面

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
Aug 21 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
Express的路由详解
Dec 10 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
jQuery查找节点方法完整实例
Sep 13 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 Javascript
JavaScript中数组常见操作技巧
Sep 01 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
在vscode里使用.vue代码模板的方法
Apr 28 Javascript
js中值引用和地址引用实例分析
Jun 21 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 Javascript
vscode+gulp轻松开发小程序的完整步骤
Oct 18 Javascript
vue.js路由跳转详解
Aug 28 #Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 #jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 #jQuery
BootStrap入门学习第一篇
Aug 28 #Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
Aug 28 #Javascript
js制作简单的音乐播放器的示例代码
Aug 28 #Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
Aug 28 #Javascript
You might like
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
php 无法加载mysql的module的时候的配置的解决方案引发的思考
2012/01/27 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
PHP验证码类ValidateCode解析
2017/01/07 PHP
PHP echo()函数讲解
2019/02/15 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
修改jQuery Validation里默认的验证方法
2012/02/14 Javascript
JavaScript和CSS交互的方法汇总
2014/12/02 Javascript
javascript折半查找详解
2015/01/26 Javascript
JavaScript tab选项卡插件实例代码
2016/02/23 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
JavaScript面向对象精要(上部)
2017/09/12 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
在Django中限制已登录用户的访问的方法
2015/07/23 Python
Python常用的爬虫技巧总结
2016/03/28 Python
python计算auc指标实例
2017/07/13 Python
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
python绘制地震散点图
2019/06/18 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
Python实现决策树并且使用Graphviz可视化的例子
2019/08/09 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
六一儿童节园长致辞
2015/07/31 职场文书
Python 如何解决稀疏矩阵运算
2021/05/26 Python
Python 文字识别
2022/05/11 Python
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android