admin管理员组文章数量:1634971
一、概述
v6相比v5,做了很多的优化。包括书写上更加的便捷,更加体现组件化思想。以往在处理路由嵌套和鉴权方面,v5的写法都靠各自开发人员去实现相对比较参差不齐。一下针对v6的配置做简单的介绍。
Github地址:GitHub - JavonHuang/react-router-v6
二、useRoutes
v6中路由的设置采用hook的方式,有点像vue的router的实例化。
import {useRoutes} from "react-router-dom";
import { Suspense, lazy } from 'react'
const routes = [
{
path: '/',
auth:false,
component:lazy(() => import('./../page/login/Login'))
},
{
path: '/Portal',
auth:true,
component:lazy(() => import('../page/portal/Portal')),
children: [
{
path: '/Portal/Home',
auth:true,
component:lazy(() => import('../page/home/Home'))
},
{ path: '/Portal/Test/:id',
auth:true,
component:lazy(() => import('../page/test/Test'))
},
{
path: '/Portal/*',
auth:false,
component:lazy(() => import('../page/error/NotFound'))
}
]
},
{
path: '*',
auth:false,
component:lazy(() => import('../page/error/NotFound'))
},
{
path: '/redirect',
auth:false,
component: lazy(() => import('../page/Redirect/Redirect')),
}
]
//根据路径获取路由
const checkAuth = (routers:any, path:String)=>{
for (const data of routers) {
if (data.path==path) return data
if (data.children) {
const res:any = checkAuth(data.children, path)
if (res) return res
}
}
return null
}
// 路由处理方式
const generateRouter = (routers:any) => {
return routers.map((item:any) => {
if (item.children) {
item.children = generateRouter(item.children)
}
item.element = <Suspense fallback={
<div>加载中...</div>
}>
{/* 把懒加载的异步路由变成组件装载进去 */}
<itemponent />
</Suspense>
return item
})
}
const Router = () => useRoutes(generateRouter(routes))
const checkRouterAuth = (path:String)=>{
let auth = null
auth = checkAuth(routes,path)
return auth
}
export{ Router,checkRouterAuth}
路由嵌套
v6中提供Outlet组件,用于预留坑渲染嵌套路由页面,是开发更加简单便捷
import './portal.scss'
import LeftSide from './LeftSide'
import TopHeader from './TopHeader'
import RouterBeforeEach from './../../routes/RouterBeforeEach'
const Portal =()=>{
return (
<div className="portal">
<div className="portal-left">
<LeftSide/>
</div>
<div className="portal-right">
<TopHeader></TopHeader>
<RouterBeforeEach/>
</div>
</div>
);
}
export default Portal
import {useNavigate,useLocation,useResolvedPath } from "react-router-dom";
import { Outlet } from 'react-router-dom'
import {checkRouterAuth} from './index'
import {useEffect,useState} from 'react'
const RouterBeforeEach = ()=>{
const navigate = useNavigate()
const location = useLocation()
const [auth,setAuth] = useState(false)
useEffect(()=>{
let obj = checkRouterAuth(location.pathname)
let blLogin =sessionStorage.getItem('login')
if(obj && obj.auth && blLogin=='false'){
setAuth(false)
navigate('/', {replace: true})
}else{
setAuth(true)
}
},[])
return auth?<Outlet/>:null
}
export default RouterBeforeEach
在挂在处渲染路由页面
import ReactDOM from 'react-dom';
import {BrowserRouter} from "react-router-dom";
import './index.css';
import {Router} from './routes/index'
ReactDOM.render(
<BrowserRouter>
<Router/>
</BrowserRouter>,
document.getElementById('root')
);
至此页面路由配置就完成了,相比以往版本的方式简单了许多。对新手更加的友好,特别对Vue的发开人员转向更加的友好
二、路由鉴权
这里我新建了一个RouterBeforeEach组件,在渲染嵌套路由的时候,对需要鉴权的路由进行判断,不满足则跳转到登录页。
import {useNavigate,useLocation,useResolvedPath } from "react-router-dom";
import { Outlet } from 'react-router-dom'
import {checkRouterAuth} from './index'
import {useEffect,useState} from 'react'
const RouterBeforeEach = ()=>{
const navigate = useNavigate()
const location = useLocation()
const [auth,setAuth] = useState(false)
useEffect(()=>{
let obj = checkRouterAuth(location.pathname)
let blLogin =sessionStorage.getItem('login')
if(obj && obj.auth && blLogin=='false'){
setAuth(false)
navigate('/')
}else{
setAuth(true)
}
},[])
return auth?<Outlet/>:null
}
export default RouterBeforeEach
三、路由参数获取
import {useSearchParams,useLocation ,useParams } from "react-router-dom";
const Test = ()=>{
const [searchParams, setSearchParams] = useSearchParams()
console.log(searchParams.get('id'))
const params = useParams()
const location =useLocation()
console.log(params)
console.log(location)
return(
<>
测试
</>
)
}
export default Test
最终效果
四、路由重定向
在routes路由配置文件添加一个重定向路由
{
path: '/redirect',
auth:false,
component: lazy(() => import('../page/Redirect/Redirect')),
}
编写重定向组件,在组件内部实现路由的跳转,从而实现路由的重定向
import { useNavigate } from "react-router-dom";
import { useEffect } from "react";
const Redirect=(props:any)=> {
let navigate = useNavigate();
useEffect(() => {
navigate("/Portal/Home");
});
return <></>;
}
export default Redirect
该方案是由官方提供的,详情可以参考官方文档
五、使用react-activation实现路由缓存
安装包:react-activation
npm install react-activation
在入口处使用<AliveScope>组件包裹页面
import ReactDOM from 'react-dom';
import {BrowserRouter} from "react-router-dom";
import './index.css';
import {Router} from './routes/index'
import { AliveScope } from 'react-activation'
ReactDOM.render(
<BrowserRouter>
<AliveScope>
<Router/>
</AliveScope>
</BrowserRouter>,
document.getElementById('root')
);
注册路由时,将需要缓存的页面使用<KeepAlive>包裹,这个组件必须设置id,否则缓存不生效。id要是唯一的,因为这个缓存时依据id实现的。
// 路由处理方式
const generateRouter = (routers:any) => {
return routers.map((item:any) => {
if (item.children) {
item.children = generateRouter(item.children)
}
item.element = <Suspense fallback={
<div>加载中...</div>
}>
{/* 把懒加载的异步路由变成组件装载进去 */}
<KeepAlive id={item.path}>
<itemponent />
</KeepAlive>
</Suspense>
return item
})
}
版权声明:本文标题:react-router-dom v6.0新特性及路由守卫结合react-activation实现路由缓存 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729176557a1188793.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论