React导航守卫(V5路由)

下载：

npm i react-router-dom@5

当我们进行路由跳转的时候，有时候需要满足某种条件才能跳转，比如我只有我们登录成功之后才能到首页面，否则就不能到首页面，这时候我们就需要对路由进行拦截。

例如：

(1) 当我们登录的时候存储一个会话存储

<button type="botton" onclick={login}>登录</botton>
 
 
const login = () => {
    sessionstorage.token = "123"
    history.push('/home') //引入useHistory,const history = useHistory();
}

(2) 然后我们给访问页面添加一个判断

封装一个判断是否登录的函数

function isAuth() {
    if(sessionstorage.token){
        return true;
    }else{
        return false;
    }
}

(3) 使用

如果没登录，则重定向登录页面

<Route path="/home" render={() => isAuth()?<Home /> : <Redirect to="/login" />} />