使用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 相关文章推荐
JavaScript 组件之旅(二)编码实现和算法
Oct 28 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 Javascript
JavaScript ParseFloat()方法
Dec 18 Javascript
基于Vue实现图书管理功能
Oct 17 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
用vscode开发vue应用的方法步骤
May 06 Javascript
JS解惑之Object中的key是有序的么
May 06 Javascript
layui table 获取分页 limit的方法
Sep 20 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 Javascript
js实现AI五子棋人机大战
May 28 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
smarty的保留变量问题
2008/10/23 PHP
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
PHP Directory 函数的详解
2013/03/07 PHP
php写的AES加密解密类分享
2014/06/20 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
详解Layer弹出层样式
2017/08/21 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
Python获取系统默认字符编码的方法
2015/06/04 Python
python 线程的暂停, 恢复, 退出详解及实例
2016/12/06 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
python读取图片颜色值并生成excel像素画的方法实例
2021/02/19 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
2019/05/05 HTML / CSS
应用心理学个人的求职信
2013/12/08 职场文书
三分钟演讲稿范文
2014/04/24 职场文书
2015年化验室工作总结
2015/04/23 职场文书
高中运动会前导词
2015/07/20 职场文书
英语教学课后反思
2016/02/15 职场文书
redis通过6379端口无法连接服务器(redis-server.exe闪退)
2021/05/08 Redis
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript
Python Matplotlib库实现画局部图
2021/11/17 Python
介绍一下28个JS常用数组方法
2022/05/06 Javascript