使用react-router4.0实现重定向和404功能

hqman 发布于2019-08-20 18:57 / 1117人阅读

摘要：原文地址在开发中，重定向和这种需求非常常见，使用可以使用进行重定向最常用的就是用户登录之后自动跳转主页。

原文地址: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页面

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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