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

 更新时间:2017年08月28日 10:24:56   作者:huruji  
本篇文章主要介绍了使用react-router4.0实现重定向和404功能的方法,具有一定的参考价值,有兴趣的可以了解一下

在开发中,重定向和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页面

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

相关文章

  • React Hooks常用场景的使用(小结)

    React Hooks常用场景的使用(小结)

    这篇文章主要介绍了React Hooks常用场景的使用,根据使用场景分别进行举例说明,帮助你认识理解并可以熟练运用 React Hooks 大部分特性,感兴趣的可以了解一下
    2021-04-04
  • React合成事件详解

    React合成事件详解

    这篇文章主要介绍了React合成事件的相关资料,帮助大家更好的理解和学习使用React,感兴趣的朋友可以了解下
    2021-05-05
  • ReactJs实现树形结构的数据显示的组件的示例

    ReactJs实现树形结构的数据显示的组件的示例

    本篇文章主要介绍了ReactJs实现树形结构的数据显示的组件的示例,非常具有实用价值,需要的朋友可以参考下
    2017-08-08
  • React生命周期原理与用法踩坑笔记

    React生命周期原理与用法踩坑笔记

    这篇文章主要介绍了React生命周期原理与用法,结合实例形式总结分析了react生命周期原理、用法及相关注意事项,需要的朋友可以参考下
    2020-04-04
  • 浅谈从React渲染流程分析Diff算法

    浅谈从React渲染流程分析Diff算法

    这篇文章主要介绍了浅谈从React渲染流程分析Diff算法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • react中的ajax封装实例详解

    react中的ajax封装实例详解

    这篇文章主要介绍了react中的ajax封装实例详解的相关资料,希望通过本文能帮助到大家,让大家理解掌握这部分内容,需要的朋友可以参考下
    2017-10-10
  • 详解react的两种动态改变css样式的方法

    详解react的两种动态改变css样式的方法

    这篇文章主要介绍了详解react的两种动态改变css样式的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • 详解React Native开源时间日期选择器组件(react-native-datetime)

    详解React Native开源时间日期选择器组件(react-native-datetime

    本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
    2017-09-09
  • 如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)

    如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, types

    这篇文章主要介绍了如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • React入门教程之Hello World以及环境搭建详解

    React入门教程之Hello World以及环境搭建详解

    Facebook 为了开发一套更好更适合自己的JavaScript MVC 框架,所以产生了react。后来反响很好,所以于2013年5月开源。下面这篇文章主要给大家介绍了关于React入门教程之Hello World以及环境搭建的相关资料,需要的朋友可以参考借鉴。
    2017-07-07

最新评论