使用react

使用react

在开发中，重定向和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 (

)

}

return (

{ this.toLogin(this.state.value) }}>登录

)

}

}

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.typeJGBVdguJ) {

case LOGIN_SUCChttp://ESS:

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即可

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。