react路由之前置路由守卫--初入篇坑

首先在app.js中引用BrowserRouter和Routes

hashHistory：hashHistory 使用 URL 中的 hash（#）部分去创建路由，举例来说，用户访问http://www.example.com/，实际会看到的是http://www.example.com/#/。

browserHistory：browserHistory 是使用 React-Router 的应用推荐的 history方案。它使用浏览器中的 History API 用于处理 URL，创建一个像example.com/list/123这样真实的 URL 。

 render(){
    return (  
      
      

        
      
      
    );
  }

Routes 是引用的组件里面包含各种路由信息

Routes 代码：

import { Route} from "react-router-dom";
import Home from "../views/Home";

import Login from "../views/login";

// 前置路由守卫Auto
import Auto from "./auto";
const Routes=()=>{
    return (
        

        
        
        
    )
}
export default Routes;  

exact是Route的一个属性，认为其是一种严格匹配模式
Route 表示匹配当前路由路径以及引用当前组件

其中Auto是当前的路由中间键，用来做路由前置首位作用

Auto代码：

import React,{Component} from 'react';
import {Route,Redirect } from 'react-router-dom';
class Auto extends Component{
 
    render(){
        // 获取token
        const token=localStorage.getItem('token');
        // 进行判断如果有token则进入当前主页否则跳转至登录页面
        if(token){
            return(
                // 
                
                // 接受父组件传过来的component组件值
                )
        }else{  
            return(
                
                // 使用Redirect做重定向，跳转到我们定义的组件当中
                )
          
        }
        
    }
}
export default Auto;

接下来就是登录之后主页的代码了，因为登录之后主页会有一个共有界面，一般是由菜单导航组成，而右下角的部分出才是主要内容所以就要定义一个共有界面

import React from 'react';
import Rainbox from '../hoc/Rainbox';
import { Route,Switch} from "react-router-dom";
import Contact from "../views/Contact";
import About from "../views/About";
const Home=()=>{
    return (
        

            
            
这是主页
            {/* 这是共有信息 */}
            
            {/* switch只显示匹配到的第一个路由 */}
            
            {/* 默认走向关于我们页面 */}
            
            
        
    )
}
export default Rainbox(Home);
// Rainbox这是定义的一个高阶组件用来切换该页面的主要色调