java重定向404,使用reactrouter4.0实现重定向和404功能的方法

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

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

import React, { Component } from &＃39;react&＃39;;

import axios from &＃39;axios&＃39;;

import { Redirect } from &＃39;react-router-dom&＃39;;

class Login extends Component{

constructor(){

super();

this.state &＃61; {value: &＃39;&＃39;, logined: false};

this.handleChange &＃61; this.handleChange.bind(this);

this.toLogin &＃61; this.toLogin.bind(this);

}

handleChange(event) {

this.setState({value: event.target.value})

}

toLogin(accesstoken) {

axios.post(&＃39;yoururl&＃39;,{accesstoken})

.then((res) &＃61;> {

this.setState({logined: true});

})

}

render() {

if(this.props.logined) {

return (

)

}

return (

)

}

}

export default Login;

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

const LOGIN_SUCCESS &＃61; &＃39;LOGIN_SUCCESS&＃39;;

const LOGIN_FAILED &＃61; &＃39;LOGIN_FAILED&＃39;;

const LOGINOUT &＃61; &＃39;LOGINOUT&＃39;;

const Login &＃61; function(state, action) {

if(!state) {

console.log(&＃39;state&＃39;);

if(sessionStorage.getItem(&＃39;usermsg&＃39;)) {

return {

logined: true,

usermsg: JSON.parse(sessionStorage.getItem(&＃39;usermsg&＃39;))

}

}

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页面也非常简单&＃xff0c;只需要在路由系统最后使用Route指定404页面的component即可

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

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