一起来看React(路由守卫)

时间：2025-04-06 22:39:00

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

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

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

路由守卫:

自定义界面的前置路由守卫,当用户点击要进入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(("isLogin")) ?
            (
                <Component {...props} />
            )
             : (
                <Redirect
                    to={{
                        pathname: "/",
                        state: { from:  }
                    }}
                />
            )
        }
    />
);
export {
    PrivateRoute
}
复制代码

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

我们在页面内

import One from "./"
import Two from "./"
import Three from "./"
import Four from "./"
复制代码

引入这四个页面,并且：

import {PrivateRoute} from "../router/PrivateRoute"
复制代码

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

<ul>
<li onClick={(this,"/Main/one")}>第一个</li>
<li onClick={(this,"/Main/two")}>第二个</li>
<li onClick={(this,"/Main/three")}>第三个</li>
<li onClick={(this,"/Main/four")}>第四个</li>
</ul>
复制代码

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

goto(i){
    ("isLogin",true)
    (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 是唯一的因为它仅仅只会渲染一个路径

相关文章