【React+Ts+Vite+AntDesign】从0到1基础项目搭建（动态路由）

最新推荐文章于 2025-02-15 16:26:27 发布

★雨潇★

最新推荐文章于 2025-02-15 16:26:27 发布

阅读量917

点赞数 5

文章标签： react.js javascript ecmascript

本文链接：https://blog.youkuaiyun.com/yasyList/article/details/141965591

版权

新建项目

npm create vite

在这里插入图片描述

配置路由

项目根目录执行命令安装依赖

npm install react-router-dom

安装AntDesign

项目根目录执行命令安装依赖

npm install antd --save

至于使用AntDesign，就这一步就可以了，使用table举例：
官网：https://ant.design/components/table-cn
在这里插入图片描述

其他关键配置

src>新建router文件夹>新建index.tsx

// index.tsx
import {
    lazy, ComponentType } from 'react'

// 动态路由部分
const pages = import.meta.glob('../pages/**/*.tsx')
const dynamicRoutes = Object.entries(pages)
  .filter(([path]) => !path.includes('/components/'))
  .map(([path, component]) => {
   
    const name = path.match(/\.\.\/pages\/(.*)\.tsx$/)?.[1]
    if (!name) return null
    let routePath = `/${
     name.toLowerCase()