React|react-router v6 简单的路由拦截 javascript|react|前端|前端框架|

【React|react-router v6 简单的路由拦截】非常简单的路由拦截，使用localstorage储存登录状态，写一个拦截组件，由他根据登录状态来判断是否跳转到登录。

import React from 'react' import { Navigate } from 'react-router-dom'// RequireAuth 组件相当于一个拦截器，是否返回被拦截的组件要听他的 function RequireAuth({ children }) { const authed = localStorage.getItem('login')return authed === 'true' ? ( // 判断 localstorage 中登录状态是否为 true children ) : ( // 跳转到登录 ); }ReactDOM.render( }> // 路由嵌套 } /> // 拦截组件 // 被拦截组件 } /> , document.getElementById('root') );

一个非常基础的路由拦截就实现了。