使用react-router4.0實現重定向和404功能

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

在開發中，重定向和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頁面