欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-11-26 12:38:15
在开发中,重定向和404这种需求非常常见,使用react-router4.0可以使用redirect进行重定向 最常用的就是用户登录之后自动跳转主页。 im...

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

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