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

hqman 發布于2019-08-20 18:57 / 1168人閱讀

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

原文地址: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 (
        
      )
    }
    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.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即可

當路由指定的所有路徑沒有匹配時，就會加載這個NoMatch組件，也就是404頁面

GPU云服務器云服務器 java重定向404 網站優化301重定向404 重定向實現代碼實現301重定向

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84936.html

react-router 按需加載

摘要：實際上程序應當只加載當前渲染頁所需的，也就是大家說的代碼分拆將所有的代碼分拆成多個小包，在用戶瀏覽過程中按需加載。這里面有個方法這是提供的方法，這也是按需加載的核心方法。注：本文使用的 react-router 版本為 2.8.1 React Router 是一個非常出色的路由解決方案，同時也非常容易上手。但是當網站規模越來越大的時候，首先出現的問題是 Javascript 文件變得...

MingjunYang 2019-08-21 14:35 評論0 收藏0
react-router @4用法整理

摘要：官方文檔源碼這篇文章主要介紹了的基本用法包括動態路由編程式導航等安裝用法動態路由的基本用法編程式導航總結安裝用法示例代碼關于路由重定向使用的格式注意位置需要在定義路由的后面比如重定向就需要寫在后面關于路由匹配默認寫在路由末尾前 router@4 react-router@4官方文檔 github源碼這篇文章主要介紹了react-router@4的基本用法,包括動態路由,編程式...

piglei 2019-08-21 17:52 評論0 收藏0
談談 react-router

摘要：談談最近使用的來開發項目，感覺確實是爽的飛起，然而總感覺還是少了點什么。注意當前版本依賴的是請不要安裝最新版。同樣的也有這個方法表示在離開路由前執行。會深度優先遍歷整個理由配置來尋找一個與給定的相匹配的路由。配置是建立在之上的。談談最近使用的 React + webpack 來開發項目，感覺確實是爽的飛起，然而總感覺還是少了點什么。對，是多頁面，每次請求頁面還要后端路由給你？多不爽...

MASAILA 2019-08-19 17:11 評論0 收藏0
nginx 適配react-router browserRoute 路由問題

摘要：適配路由問題絕對能用的一篇配置，文末直接有文件，伸手黨直接拿走本文環境比較復雜，首先兩層轉發，并且訪問路徑也不是根路徑。不對做編碼，因此請求為，可以被規則匹配到注意是空格。配置錯誤解決優先級問題后，問題依然存在。導致找不到請求。 nginx 適配react-routerbrowserRoute 路由問題絕對能用的一篇nginx配置，文末直接有文件，伸手黨直接拿走本文環境比較復雜，首...

codeGoogle 2019-08-26 10:58 評論0 收藏0
從零開始，揭秘React服務端渲染核心技術

摘要：不過這時的控制臺會拋出這樣一則警告提醒我們在服務端渲染時用來取代，并警告我們在時將不能用去混合服務端渲染出來的標簽。綜上所述，服務端和客戶端都是需要路由體現的。我們畫一下重點，意思很明確，就是為了服務端渲染而打造的。拋磚引玉在早幾年前，jquery算是一個前端工程師必備的技能。當時很多公司采用的是java結合像velocity或者freemarker這種模板引擎的開發模式，頁面渲染...

googollee 2019-08-26 10:27 評論0 收藏0