React configure le routage des pages comme vue et prend en charge le routage de redirection, les gardes de routage, etc. (complété à l'aide de useRoutes)...

• J'espère obtenir le vuemême résultat que dans . Dans jsla configuration, les opérations de base telles que la redirection d'itinéraire sont effectuées. Je n'ai pas l'habitude d'utiliser Routes、Routeetc.

• Tous sont basés sur [email protected]l’encapsulation d’un composant de routage et l’affichage d’un composant de garde de routage.

• Composant de routage-ExRouter.tsx :<ExRouter routes={routes}></ExRouter>

  Étendez la configuration du routage, prenez en charge la redirection et facilitez l'expansion d'autres attributs.

  ```js // j'utilise ré[email protected] pour importer { useRoutes, Navigate, IndexRouteObject, NonIndexRouteObject } from 'react-router-dom' import { useLocation, Location } from 'react-router'

  /**

  • @description : utilise IndexRouteObject / interface exIndexRouteObject extends IndexRouteObject { / *
    • @description : adresse de routage de redirection*/redirection ? : chaîne }

  /**

  • @description : Il s'agit de NonIndexRouteObject / interface exNonIndexRouteObject extends NonIndexRouteObject { / *
    • @description : adresse de routage de redirection*/redirection ? : chaîne }

  /**

  • @description : Type d'objet de route / type d'export exRouteObject = exIndexRouteObject | exNonIndexRouteObject / *
  • @description : Rechercher le type d'objet route */ type d'export findExRouteObject = exRouteObject | undefined

  /**

  • @description : paramètres du composant /type props = {/ *
    • @description : liste de routes / routes : exRouteObject[], / *
    • @description : liste des composants enfants*/ enfants ? : any }

  const Component = (props: props) => { // Objet de navigation actuel const location = useLocation() // Rechercher un objet d'itinéraire const findRoute = (routes : exRouteObject[], location : Location) : findExRouteObject => { // Niveau actuel Cochez un tour let route : any = routes.find((item: any) => item.path === location.pathname) // Sinon, recherchez les sous-pages du même niveau au niveau actuel if (!route) { // Vérifier, trouver l'arrêt routes.some((item: any) => { // Supprimer la sous-liste const children: exRouteObject[] = item?.children || [] // Vérifier route = findRoute(children, location) // Il y a une valeur Puis pause return !!route }) } // Retour retour route } // Trouver la route actuelle const route : findExRouteObject = findRoute(props.routes, location) // Retour au rendu return ( < > {/* Charger toutes les routes/} { useRoutes(props.routes) } {/ Vérifier si la route actuelle nécessite une redirection*/} { route?.redirect && } > ) }

  exporter le composant par défaut ```

• Composant d'interception d'itinéraire (garde d'itinéraire) :<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 ```