admin管理员组文章数量:1633915
先上代码:
入口文件
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom'
import AppRouter from './router/routeNav';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<BrowserRouter>
<AppRouter />
</BrowserRouter>
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
AppRouter.js文件
import { Route,Routes, useLocation, Navigate } from 'react-router-dom'
import Login from '../page/login/login';
import Index from '../page/index/index';
import Register from '../page/register/register';
import ErrPage from '../page/ErrPage/errPage';
import MySpace from '../component/my_space/mySpace';
import H5Template from '../component/h5_template/h5Template';
import { ReactNode } from 'react';
const AppRouter = () => {
const location = useLocation();
const { pathname } = location;
const routes = [
{
path: '/',
auth: false,
component: <Navigate to='/index' />,
},
{
path: '/index',
auth: false,
component: <Index />,
child: [
{
path: '/index/myspace',
auth: true,
component: <MySpace />
},
{
path: '/index/h5template',
auth: false,
component: <H5Template />
}
]
},
{
path: '/login',
auth: false,
component: <Login />
},
{
path: '/register',
auth: false,
component: <Register />
},
{
path: '/errPage',
auth: false,
component: <ErrPage />
},
{
path: '/*',
auth: false,
component: <Navigate to='/errPage' replace={true}></Navigate>
}
]
const isLogin = false;
//请求页面路径需要验证 && 没有登录 -> 跳转登录页 , 后续考虑登录后是否自动跳转被拦截路径
const RouteNav = (param: any) => {
return (
param.map((item: {path: string,auth: boolean,component: ReactNode, child?: any}) => {
return (
<Route path={item.path} element={item.path === pathname && item.auth && !isLogin ? <Navigate to='/login' replace={true}></Navigate> : itemponent} key={item.path}>
{
item?.child && RouteNav(item.child)
}
</Route>
)
})
)
}
return (
<Routes>
{
RouteNav(routes)
}
</Routes>
)
}
export default AppRouter;
解释:AppRoute文件动态生成了路由,该文件最后会返回如下形式的代码给入口文件。
<Routes>
<Route>
<Route></Route>
....
</Route>
...
</Routes>
函数RouteNav会根据routes递归生成路由表,利用useLoation可以拿到用户当前想要访问的页面路径。如果用户访问的路径是'/'则利用routes的第一条规则,让用户重定向至index页。如果用户访问的路径不存在与路右表里面,则由最后一条规则重定向至错误页。如果用户访问的页面需要登录,但是当前未登录,则在创建路由过程中,利用如下判断,重定向至登录页。
element={item.path === pathname && item.auth && !isLogin ? <Navigate to='/login' replace={true}></Navigate> : itemponent}
这样一个简单的基于React Router V6的路由守卫就做好了
版权声明:本文标题:React Router V6实现路由守卫 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1729176366a1188768.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论