下载:
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" />} />