【无标题】

react router v6 路由 及路由拦截

项目场景：

项目场景：千锋React项目实战 全球新闻发布管理系统

学习笔记：

(1) React Router V6 ： Route组件使用方法

//旧版本写法
<Route path="/login" element={<Login/>}/>
//V6版本写法
<Route path="/login" render={()=>{return <Login/>}/>

(2)V6版本实现 路由拦截

localStorage中token字段是否有值，如果有，到达NewsSandBox，没有到达Login界面

function IndexRouter(props) {
    // RequireAuth 组件相当于一个拦截器，是否返回被拦截的组件要听他的
    function RequireAuth({ children }) {
        const authed = localStorage.getItem('token')
        return authed !== null ? ( // 判断 localstorage 中登录状态是否为 true
            children
        ) : (
            <Navigate to="/login" replace /> // 跳转到登录
        );
    }
    return (
        <BrowserRouter>
            {/*path是模糊匹配，我们可以使用Routes组件，如果匹配到第一个之后，就不再继续往下匹配
            <Routes>不是按顺序扫描路由,而是自动为当前 URL 选择最好的路由。它还允许您在整个应用程序中传递路由*/}
            <Routes>
                <Route path="/login" element={<Login/>}/>
                {/*<Route path="/" element={<NewsSandBox/>}/>*/}
                {/*//如果刚开始登陆没有token字段（未授权），就重定向到Login*/}
                <Route path="/" element={
                    <RequireAuth> // 拦截组件
                        <NewsSandBox/> // 被拦截组件
                    </RequireAuth>
                }/>
            </Routes>
        </BrowserRouter>

    );
}

export default IndexRouter;

---

参考文章：https://blog.csdn.net/u014418267/article/details/121524573