React 像 vue 一样配置页面路由,并支持重定向路由,路由守卫等(使用 useRoutes 完成)...

简介: React 像 vue 一样配置页面路由,并支持重定向路由,路由守卫等(使用 useRoutes 完成)...
  • 希望达到跟 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, Location } 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: 找到路由对象类型 */ export type findExRouteObject = exRouteObject | undefined
  • /**
  • @description: 组件参数/ type props = { /*
  • @description: 路由列表 / routes: exRouteObject[], /*
  • @description: 子组件列表 */ children?: any }
  • const Component = (props: props) => { // 当前导航对象 const location = useLocation() // 找到路由对象 const findRoute = (routes: exRouteObject[], location: Location): findExRouteObject => { // 当前层级检查一轮 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: findExRouteObject = findRoute(props.routes, location) // 返回渲染 return ( <> {/* 加载所有路由 /} { useRoutes(props.routes) } {/ 检查当前路由是否需要重定向 */} { route?.redirect && } > ) }
    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 // } else if (!location.pathname.includes('/login') && !token) { // // 不是跳转登录页 && token无值 // return // } // 验证通过 return props.children }
    export default Component ```
  • 上面两个组件在路由中的使用:
    ```js import 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 ( }> ) }
    // 基础路由 const baseRoutes: Record [] = [ { 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 [] = [ ...baseRoutes, { path: "/404", element: (<>页面地址不存在>), }, { path: "/", element: }, { path: "*", element: }, ]
    // 加载配置式路由 function Router () { return ( {/* 加载所有路由 /} {/ { useRoutes(props.routes) } /} {/ 加载所有路由,并扩展路由配置 */} ) }
    // 导出 export default Router ```

相关文章
|
7天前
|
编解码 前端开发 JavaScript
js react antd 实现页面低分变率和高分变率下字体大小自适用,主要是配置antd
在React中结合Ant Design与媒体查询,通过less变量和响应式断点动态调整`@font-size-base`,实现多分辨率下字体自适应,提升跨设备体验。
30 2
|
7月前
|
前端开发 JavaScript
除了使用Route组件,React Router还有其他方式处理404错误页面吗
除了使用Route组件,React Router还有其他方式处理404错误页面吗
182 58
|
7月前
|
JavaScript 前端开发 算法
vue渲染页面的原理
vue渲染页面的原理
230 56
|
7月前
|
前端开发
如何在React Router中定义404错误页面组件?
如何在React Router中定义404错误页面组件?
171 57
|
7月前
|
前端开发 UED
在React Router中,如何处理路由的404错误页面?
在React Router中,如何处理路由的404错误页面?
248 57
|
7月前
|
前端开发
如何在React Router中进行路由重定向?
如何在React Router中进行路由重定向?
413 57
|
7月前
|
资源调度 JavaScript 前端开发
Pinia 如何在 Vue 3 项目中进行安装和配置?
Pinia 如何在 Vue 3 项目中进行安装和配置?
504 4
|
11月前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
9月前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
1154 9
|
12月前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
739 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置