溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在開發中，重定向和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頁面
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
