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

新建项目

javascript 复制代码
npm create vite




配置路由

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

javascript 复制代码
npm install react-router-dom

安装AntDesign

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

javascript 复制代码
npm install antd --save

至于使用AntDesign,就这一步就可以了,使用table举例:

官网:https://ant.design/components/table-cn

其他关键配置

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

javascript 复制代码
// 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()}`
    routePath = routePath.replace(/\/index$/, '').replace(/\[([^\]]+)\]/g, ':$1')
    if (routePath === '/index') routePath = '/'
    return {
      path: routePath,
      element: lazy(component as () => Promise<{ default: ComponentType<any> }>)
    }
  })
  .filter(Boolean)

// 固定路由部分
const notView = lazy(() => import('../404'))
const Home = lazy(() => import('@/pages/Home/index'))
const staticRoutes = [
  {
    path: '/',
    element: Home
  },
  {
    path: '*',
    element: notView 
  }
]
// 合并动态路由和固定路由
const routes = [...staticRoutes, ...dynamicRoutes]
export default routes

App.tsx

js 复制代码
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import routes from './router'
import { Suspense } from 'react'

function App() {
  const safeRoutes = routes || []
  return (
    <BrowserRouter>
      <div>
        <Suspense fallback={<div>Loading...</div>}>
          <Routes>
            {safeRoutes.map(
              (route) =>
                route && <Route key={route.path} path={route.path} element={<route.element />} />
            )}
          </Routes>
        </Suspense>
      </div>
    </BrowserRouter>
  )
}
export default App

src>新建pages文件夹

再新建Home文件夹>index.tsx

js 复制代码
// src/pages/Home/index.tsx
import React from 'react';

const Home: React.FC = () => {
  return <div>Home Page</div>;
};

export default Home;

测试页面,能正常显示内容就ok。

后续所有跳转页面都在pages/目录

例:

这样就不用一个一个傻瓜式的写路由了,只需要管理文件,路由自动读取。

关于出现问题:

报错找不到模块"@/

修改vite.config.ts

js 复制代码
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import { resolve } from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': resolve('./src'),
    },
  },
});

修改tsconfig.json

js 复制代码
{
  "compilerOptions": {
    "baseUrl": "./", // 设置基础路径为当前目录
    "paths": { // 配置路径映射,@ 符号代表 src 目录
      "@/*": ["./src/*"]
    },
    "target": "ES2020", // 目标编译版本为 ES2020
    "useDefineForClassFields": true, // 允许类字段使用 defineProperty 进行定义
    "module": "ESNext", // 使用 ES 模块系统
    "lib": ["ES2020", "DOM", "DOM.Iterable"], // 编译时需要引入的库
    "skipLibCheck": true, // 跳过库文件的类型检查

    /* Bundler mode */
    "moduleResolution": "bundler", // 模块解析策略为 bundler
    "allowImportingTsExtensions": true, // 允许导入 TypeScript 扩展文件
    "resolveJsonModule": true, // 允许导入 JSON 模块
    "isolatedModules": true, // 确保每个文件都可以单独编译
    "noEmit": true, // 不生成输出文件
    "jsx": "preserve", // 保留 JSX 语法

    /* Linting */
    "strict": true, // 启用所有严格类型检查选项
    "noUnusedLocals": true, // 禁止未使用的局部变量
    "noUnusedParameters": true, // 禁止未使用的函数参数
    "noFallthroughCasesInSwitch": true // 禁止 switch 语句中存在空缺情况
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"] // 包含的文件类型
}

报错__dirname波浪线

执行代码

js 复制代码
npm install @types/node --save-dev

感谢你的阅读,如对你有帮助请收藏+关注!

只分享干货实战精品从不啰嗦!!!

如某处不对请留言评论,欢迎指正~

博主可收徒、常玩QQ飞车,可一起来玩玩鸭~

相关推荐
十八朵郁金香1 小时前
【VUE案例练习】前端vue2+element-ui,后端nodo+express实现‘‘文件上传/删除‘‘功能
前端·javascript·vue.js
LCG元2 小时前
Vue.js组件开发-实现全屏图片文字缩放切换特效
前端·javascript·vue.js
还是鼠鼠3 小时前
图书管理系统 Axios 源码__新增图书
前端·javascript·vscode·ajax·前端框架·node.js·bootstrap
还是鼠鼠6 小时前
图书管理系统 Axios 源码 __删除图书功能
前端·javascript·vscode·ajax·前端框架·node.js·bootstrap
轻口味6 小时前
Vue.js `Suspense` 和异步组件加载
前端·javascript·vue.js
还是鼠鼠7 小时前
图书管理系统 Axios 源码__编辑图书
前端·javascript·vscode·ajax·前端框架
北极象8 小时前
vue3中el-input无法获得焦点的问题
前端·javascript·vue.js
Loong_DQX8 小时前
【react+redux】 react使用redux相关内容
前端·react.js·前端框架
GISer_Jing8 小时前
react redux监测值的变化
前端·javascript·react.js
m0_528723819 小时前
react中useEffect的使用
前端·javascript·react.js