React路由表中TypeScript类型注解

最新推荐文章于 2024-09-18 09:56:50 发布

FØund404

最新推荐文章于 2024-09-18 09:56:50 发布

阅读量765

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React 文章标签： typescript react.js javascript

本文链接：https://blog.youkuaiyun.com/bl_ack233/article/details/126994638

React 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个使用React的路由表配置示例，展示了如何通过定义路由数组来组织页面路径及元素映射，包括首页、登录、注册等页面，并通过useRoutes钩子实现路由规则的生成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注意路由表文件后缀必须为.tsx，否则组件会提示xx指的是一个值，但在此处用作类型

路由表


// 代码示例
import Index from './Index';
import Home from './Home';
import Signin from './signIn';
import Register from './register';
import ShoppingCart from './ShoppingCart';
import Detail from './Detail';

// 定义数组每一项的接口
export interface IRoute {
    caseSensitive?: boolean
    children?: Array<IRoute>
    element?: React.ReactNode
    index?: boolean
    path?: string
    auth?: boolean
  }

const routes:Array<IRoute> =  [
    {
      path:'/',
      element:<Index/>
    },
    {
      path:'/index',
      element:<Index/>
    },
    {
      path:'/home',
      element:<Home/>
    },
    {
      path:'/signin',
      element:<Signin/>
    },
    {
      path:'/register',
      element:<Register/>
    },
    {
      path:'/shoppingCart',
      element:<ShoppingCart/>
    },
    {
      path:'/detail',
      element:<Detail/>
    },
    {
      path:'*',
      element:<h1>404</h1>
    }
]

export default routes

生成

// 引入hook
import { useRoutes } from 'react-router-dom';

// 生成路由
// 根据路由表生成对应的路由规则
const element = useRoutes(routes)

...

<div>
  {
    element
  }
</div>
    
...