vue
と同じ結果が得られることを願っています。設定では、ルートのリダイレクトなどの基本的な操作は完了しています。etc を使用して相互にラップすることjs
に慣れていません。Routes、Route
[email protected]
すべては、ルーティング コンポーネントのカプセル化とルーティング ガード コンポーネントの表示に基づいています。ルーティングコンポーネント
ExRouter.tsx
- :<ExRouter routes={routes}></ExRouter>
ルーティング設定を拡張し、リダイレクトをサポートし、他の属性の拡張を容易にします。
```js // [email protected] に基づいてパッケージ import { useRoutes, Navigate, IndexRouteObject, NonIndexRouteObject } from 'react-router-dom' import { useLocation, Location } from 'react-router'
/**
- @description: 扩展 IndexRouteObject / インターフェース exIndexRouteObject extends IndexRouteObject { / *
- @description: リダイレクトルーティングアドレス*/ redirect?: string }
/**
- @description: 扩展 NonIndexRouteObject / インターフェース exNonIndexRouteObject extends NonIndexRouteObject { / *
- @description: リダイレクトルーティングアドレス*/ redirect?: string }
/**
- @description: ルート オブジェクト タイプ/ エクスポート タイプ exRouteObject = exIndexRouteObject | exNonIndexRouteObject / *
- @description: ルート オブジェクト タイプを検索します */ エクスポート タイプ findExRouteObject = exRouteObject | unknown
/**
- @description: コンポーネントパラメータ/type props = {/ *
- @description: ルートリスト/ ルート: exRouteObject[], / *
- @description: 子コンポーネントのリスト*/children?: any }
const Component = (props: props) => { // 現在のナビゲーション オブジェクト const location = useLocation() // ルート オブジェクトを検索 const findRoute = (routes: exRouteObject[], location: Location): findExRouteObject => { // 現在のレベル1 ラウンドをチェック let Route: any = Routes.find((item: any) => item.path === location.pathname) // そうでない場合は、現在のレベルで同じレベルのサブページを検索します if (!route) { // チェック、停留所を見つけます Routes.some((item: any) => { // サブリスト const Children を取り出します: exRouteObject[] = item?.children || [] // ルートをチェック = findRoute(children, location) // 値があるので、一時停止します return !!route }) } // return ルートを返します } // 現在のルートを検索します const Route: findExRouteObject = findRoute(props.routes, location) // レンダリングに戻ります return ( < > {/* すべてのルートを読み込みます/} { useRoutes(props.routes) } {/現在のルートにリダイレクトが必要かどうかを確認します*/} { Route?.redirect && } > ) }
デフォルトコンポーネント ``` をエクスポートします
- @description: 扩展 IndexRouteObject / インターフェース exIndexRouteObject extends IndexRouteObject { / *
ルートインターセプト (ルートガード) コンポーネント:
<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 ```
React は vue のようにページ ルーティングを設定し、リダイレクト ルーティング、ルーティング ガードなどをサポートします (useRoutes を使用して完了)。
おすすめ
転載: blog.csdn.net/zz00008888/article/details/132974424
ランキング