使用react-router4.0實現(xiàn)重定向和404功能

hqman 發(fā)布于2019-08-20 18:57 / 1173人閱讀

摘要：原文地址在開發(fā)中，重定向和這種需求非常常見，使用可以使用進行重定向最常用的就是用戶登錄之后自動跳轉(zhuǎn)主頁。

原文地址:https://github.com/huruji/blog/issues/2

在開發(fā)中，重定向和404這種需求非常常見，使用React-router4.0可以使用Redirect進行重定向
最常用的就是用戶登錄之后自動跳轉(zhuǎn)主頁。

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;

以上這個示例僅僅是將登錄的狀態(tài)作為組件的state使用和維護的，在實際開發(fā)中，是否登錄的狀態(tài)應(yīng)該是全局使用的，
因此這時候可能你會需要考慮使用redux等這些數(shù)據(jù)狀態(tài)管理庫，方便我們做數(shù)據(jù)的管理。這里需要注意的使用傳統(tǒng)的登錄方式
使用cookie存儲無序且復(fù)雜的sessionID之類的來儲存用戶的信息，使用token的話，返回的可能是用戶信息，此時可以考慮
使用sessionStorage、localStorage來儲存用戶信息（包括頭像、用戶名等），此時書寫reducer時需要指定初始狀態(tài)
從存儲中獲取，如：

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頁面也非常簡單，只需要在路由系統(tǒng)最后使用Route指定404頁面的component即可

當(dāng)路由指定的所有路徑?jīng)]有匹配時，就會加載這個NoMatch組件，也就是404頁面