zoukankan      html  css  js  c++  java
  • 一起来看React(路由守卫)

    原文链接:https://juejin.im/post/5d005664f265da1bc64bba64

    我们在很多时候都会接触到路由守卫--->无论是不是做(代码小子)的人

    我们在浏览各网页时会看到头部的网址,如:

    img

    当我们在逛:淘宝/天猫/京东 这一类的网站时我们自定义输入地址时,我们应该先登录,如果没登录我们应该跳转到指定页面

    路由守卫:

    自定义界面的前置路由守卫,当用户点击要进入r组件时,路由守卫发起判断,如果条件满足则进入,否则跳转至pathname组件
    
    

    在实现路由守卫时:我们首先要安装

    npm install react-router-dom --save-dev //这里可以使用cnpm代替
    

    定义私有开关isLogin为假,在PrivateRoute中使用 然后我们去页面触发

    import React from 'react'; 
    import {Redirect,Route} from 'react-router-dom';
    const PrivateRoute = ({ component: Component, ...rest }) => (
        <Route
            {...rest}
            render={props =>
                Boolean(sessionStorage.getItem("isLogin")) ?
                (
                    <Component {...props} />
                )
                 : (
                    <Redirect
                        to={{
                            pathname: "/",
                            state: { from: props.location }
                        }}
                    />
                )
            }
        />
    );
    export {
        PrivateRoute
    }
    

    我们简单地做几个路由守卫----(路由跳转 one two three four 页并守卫)

    我们在页面内

    import One from "./one.js"
    import Two from "./two.js"
    import Three from "./three.js"
    import Four from "./four.js"
    

    引入这四个页面,并且:

    import {PrivateRoute} from "../router/PrivateRoute"
    

    引入我们之前书写的PrivateRoute,接下来我们书写我们的点击事件

    <ul>
    <li onClick={this.goto.bind(this,"/Main/one")}>第一个</li>
    <li onClick={this.goto.bind(this,"/Main/two")}>第二个</li>
    <li onClick={this.goto.bind(this,"/Main/three")}>第三个</li>
    <li onClick={this.goto.bind(this,"/Main/four")}>第四个</li>
    </ul>
    

    当我们点击我们的N个时都会触发我们的goto(跳转)函数

    goto(i){
        sessionStorage.setItem("isLogin",true)
        this.props.history.push(i)
    }
    

    goto为我们的函数,设置的Item内的IsLogin为true是代表我们可以进行跳转,如果Islogin==""的话我们将无法进行跳转。

    ---->isLogin主要是:路由守卫发起判断,如果条件满足则进入,否则跳转至pathname组件

    当以上都满足时我们要用Swithch和内部的PrivateRoute进行操作

    <Switch>
    <PrivateRoute path="/Main/one" component={One} ></PrivateRoute>
    <PrivateRoute path="/Main/two" component={Two} ></PrivateRoute>
    <PrivateRoute path="/Main/three" component={Three} ></PrivateRoute>
    <PrivateRoute path="/Main/four" component={Four} ></PrivateRoute>
    <Route  path="/" component={One} />
    </Switch>  
    

    Switch 是唯一的因为它仅仅只会渲染一个路径

  • 相关阅读:
    超详细JSON解析步骤
    HTTP请求头和响应头总结
    Oracle 数据库常用操作语句大全
    关于HTTP协议,一篇就够了
    PowerDesigner工具建表步骤
    求助:ACM剑气算法
    一道题
    个人Java学习中的遇到的几个模糊的地方
    Java编程:数学黑洞6174
    高级查询
  • 原文地址:https://www.cnblogs.com/chengquanomg/p/11553770.html
Copyright © 2011-2022 走看看