-
希望达到跟
vue
一样,在js
配置中则完成路由重定向的等基础操作,不太习惯使用Routes、Route
等互相包裹的方式。 -
所有基于
react-router-dom@6.15.0
封装了一个路由组件,并附带展示个路由守卫组件。 -
路由组件 -
ExRouter.tsx
:<ExRouter routes={routes}></ExRouter>
扩展路由配置,支持重定向,以及方便扩展其他属性。
js// 基于 react-router-dom@6.15.0 封装 import { useRoutes, Navigate, IndexRouteObject, NonIndexRouteObject } from 'react-router-dom' import { useLocation } from 'react-router' /** * @description: 扩展 IndexRouteObject */ interface exIndexRouteObject extends IndexRouteObject { /** * @description: 重定向路由地址 */ redirect?: string } /** * @description: 扩展 NonIndexRouteObject */ interface exNonIndexRouteObject extends NonIndexRouteObject { /** * @description: 重定向路由地址 */ redirect?: string } /** * @description: 路由对象类型 */ export type exRouteObject = exIndexRouteObject | exNonIndexRouteObject; /** * @description: 组件参数 */ type props = { /** * @description: 路由列表 */ routes: exRouteObject[], /** * @description: 子组件列表 */ children?: any } const Component = (props: props) => { // 当前导航对象 const location = useLocation() // 找到路由对象 const findRoute = (routes: exRouteObject[], location:any): any => { // 当前层级检查一轮 let route: any = routes.find((item: any) => item.path === location.pathname) // 没有则搜索当前层级同级子页面 if (!route) { // 排查,找到停止 routes.some((item: any) => { // 取出子列表 const children: exRouteObject[] = item?.children || [] // 进行排查 route = findRoute(children, location) // 有值则暂停 return !!route }) } // 返回 return route } // 找到当前路由 const route: any = findRoute(props.routes, location) // 返回渲染 return ( <> {/* 加载所有路由 */} { useRoutes(props.routes) } {/* 检查当前路由是否需要重定向 */} { route?.redirect && <Navigate to={route.redirect} replace /> } </> ) } export default Component
-
路由拦截(路由守卫)组件:
<BeforeEach></BeforeEach>
js// import { Navigate, useLocation, useSearchParams } from 'react-router-dom' const Component = (props: any) => { // // 接收路由参数 // const [searchParams] = useSearchParams() // // 当前导航对象 // const location = useLocation() // // token (检查本地或路由参数) // const token = 'xxxx' // // console.log(location, searchParams.get('token')) // // 路由权限校验 // if (location.pathname.includes('/login') && token) { // // 跳转登录页 && token有值 // return <Navigate to="/home" replace /> // } else if (!location.pathname.includes('/login') && !token) { // // 不是跳转登录页 && token无值 // return <Navigate to="/login" replace /> // } // 验证通过 return props.children } export default Component
-
上面两个组件在路由中的使用:
jsimport React from 'react' import { Navigate } from 'react-router-dom' import BeforeEach from './BeforeEach' import ExRouter from './ExRouter' // 懒加载 const lazyload = (path: string) => { // 加载组件 let Component=React.lazy(()=>{return import (`@/${path}`)}) // 返回渲染 return ( <React.Suspense fallback={<>请等待·····</>}> <Component /> </React.Suspense> ) } // 基础路由 const baseRoutes: Record<string, any>[] = [ { path: '/home', element: lazyload('views/home'), }, { path: '/user', element: lazyload('views/user'), }, { path: '/layout', redirect: '/layout/home', element: lazyload('layouts/BaseLayout'), children: [ { path: '/layout/home', redirect: '/layout/home/home1', element: lazyload('views/home'), children: [ { path: '/layout/home/home1', element: lazyload('views/home') } ] } ] } ] // 路由列表 const routes: Record<string, any>[] = [ ...baseRoutes, { path: "/404", element: (<>页面地址不存在</>), }, { path: "/", element: <Navigate to="/home" /> }, { path: "*", element: <Navigate to="/404" /> }, ] // 加载配置式路由 function Router () { return ( <BeforeEach> {/* 加载所有路由 */} {/* { useRoutes(props.routes) } */} {/* 加载所有路由,并扩展路由配置 */} <ExRouter routes={routes}></ExRouter> </BeforeEach> ) } // 导出 export default Router
React 像 vue 一样配置页面路由,并支持重定向路由,路由守卫等(使用 useRoutes 完成)
卡尔特斯2023-09-18 11:41
相关推荐
哑巴语天雨1 小时前
React+Vite项目框架初遇你时动了情1 小时前
react 项目打包二级目 使用BrowserRouter 解决页面刷新404 找不到路由码农老起1 小时前
掌握 React:组件化开发与性能优化的实战指南前端没钱2 小时前
从 Vue 迈向 React:平滑过渡与关键注意点全解析高山我梦口香糖5 小时前
[react] <NavLink>自带激活属性撸码到无法自拔5 小时前
React:组件、状态与事件处理的完整指南高山我梦口香糖5 小时前
[react]不能将类型“string | undefined”分配给类型“To”。 不能将类型“undefined”分配给类型“To”乐闻x8 小时前
VSCode 插件开发实战(四):使用 React 实现自定义页面irisMoon068 小时前
react项目框架了解web1508509664116 小时前
【React&前端】大屏适配解决方案&从框架结构到实现(超详细)(附代码)