React-18搭建后台管理 Vite+TS+AntdesignUI -02

已于 2023-04-27 15:18:42 修改
阅读量181 收藏 1
点赞数
文章标签： react.js 前端 javascript
于 2023-04-27 15:15:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72393122/article/details/130396726
版权

路由的搭建 -- 第一种写法  组件方式的写法

  • 安装路由最新版，用的是@6版本的npm install react-router-dom
  • 以下就是组件式写法，还有一种是跟vue一样的路由表写法，两者在日常开发中都可能遇到，所以都说一下

  •  具体实现

  • 在Main.js中注释掉App组件 换成我们导出的Router组件
  •  在App组件中展示我们定义的路由组件需要引入专门的占位符Outlet通过Link可以点击跳转
  • 这样在地址栏可以通过切换转到

 

皮蛋没有保质期
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
TS+React从零构建企业级后台管理系统
11-26
本次课程主要内容是采用typescript+react技术栈打造一个企业级后台管理系统。对于没有ts使用经验的同学也无需担心，我会首引导大家如何ts入门，然后教大家如何用ts写react，如何使用ts+redux做多页面数据共享，如何用redux做RBAC权限管理，如何使用react-router-dom做路由管理
React18入门（第二篇）——React18+Ts项目配置husky、eslint、pretttier、commitLint
做笔记/记录遇到的前端bug
10-01 2050
手摸手教你在React18项目中配置husky、commitlint、prettier 完成git代码提交校验
快速搭建React18 + Redux + vite + axios + ant-design项目
m0_55337573的博客
03-27 1674
本篇文章将介绍react18搭建pc端后台管理项目的初始流程，主要技术栈React18 + Redux + vite + axios + ant-design等
react+vite+ts+antdesign项目搭建-20220802
m0_49827178的博客
07-27 3818
react+vite+ts+antd项目搭建
用Vite从零到一创建React+ts项目
weixin_45822952的博客
09-18 864
这里可以自行选择适合自己的框架类似于antd、Material UI...等。ps:如果失败的话尝试（1：使用管理员身份执行命令（2：切换镜像重试。在vite.config.ts 引入path加上下面的代码片段。同时在tsconfig.json 让IDE能识别这个别名。然后在router文件夹下创建index.tsx文件。这里我选的是移动端Material UI 官方文档。然后在vite.config.ts中进行相关配置。接下来就是一些配置、路由、网络封装什么的。选择自己想要的一些框架和配置。
react-antd-admin:react + ts + antd实现的管理系统模版
03-11
基于react + ts + antd建立的管理后台脚手架模版 线上地址 git地址 单独使用 详情请查看 1.配置抽屉 1-1。可缓存系统配置 记录用户使用的系统配置，缓存浏览器中，记录用户习惯。 1-2.antd换肤（Layout组件未封装）...
react-redux-cli:React + React-Router + TS + JS +蚂蚁设计+ webpack4.0脚手架
03-09
项目react-redux-cli说明React + React-Router + TS + JS +蚂蚁设计+ webpack4.0脚手架业务介绍目录结构├── dist // 编译结果目录├── build // webpack 配置目录│ ├── webpack.base.js // 公用配置│ ├─...
react-antd-ts-admin:react + antd + typescript的后台管理系统
03-11
项目简介基于React+AntD+TypeScript的后台管理系统技术依赖React-（UI框架） 蚂蚁设计-（组件库） TypeScript-（静态类型） Webpack 轴距较少的功能登录/退出全屏浏览一键换肤个人中心侧边菜单标签快捷导航图标表单...
基于React18、React-Router V6、Redux Vite2、Ant-Design 开源的一套后台管理框架
最新发布
11-04
Hooks Admin，基于 React18、React-Router V6、React-Hooks、Redux、TypeScript、Vite2、Ant-Design 开源的一套后台管理框架。
vite-react-zhihu:vite + react + typescript仿知乎
03-31
Vite React应用这是一个Vite官方脚手架建造的React + TypeScript模版。
react-vite-ts
04-05
这是一个vite2＆React17＆Typescript演示 去做 集成Redux ，或者使用封装过的 约定式路由 还记得吗，在Vite中，如果想按需加载，可以使用这个插件： ，现在已经支持Vite 2了 less换成scss Production Mode ， SSR ，参照官网配置即可，遇到什么坑可以一起讨论
react+ts+vite+router6+antd 保姆级搭建
欢迎来到我的博客
08-30 3983
react+ts+vite+router6+antd 保姆级搭建
vite+react+ts+sass搭建项目
weixin_57337549的博客
03-05 7223
vite+React+ts+sass重0开始搭建项目
React-18搭建后台管理 Vite+TS+AntdesignUI -04 侧边栏布局
m0_72393122的博客
04-27 361
React-18搭建后台管理 Vite+TS+AntdesignUI -04 侧边栏实现
使用react实现后台管理系统项目
m0_71933813的博客
12-30 8459
一.开发React必须依赖三个库 1.react：包含react所必须的核心代码 2.react-dom：react渲染在不同平台所需要的核心代码 3.babel：将jsx转换成React代码的工具 二.React的依赖引入 1.方式一：直接CDN引入 2.方式二：下载后，添加本地依赖 1).在html中引入 a.react.js b.react-dom.js c.b
使用 React18 + Vite + TypeScript 完成公司项目经验总结，学到了很多
程序员成长指北
03-15 810
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群当前找工作环境恶劣，很多求职者表示招聘不仅要求会 vue，还要求会 react。刚好这段时间我用 React18 + Vite + TS 为公司从 0 到 1 开发了一个项目，就顺便总结了一些前端开发知识和技巧，帮助我记忆这些知识的同时，希望能对你也有所启发。欢迎评论区交流。我会把代码（当然不是真...
react18+antd5从0到1的后台管理系统（一）
12day的博客
02-01 2344
搭建这个项目，完全是自我踩坑趟过来的，并且基于我的开发经验，让大家快速入门上手前端项目开发，并少走弯路。教程适合初学者，若有问题欢迎大佬及时提出！
React-18搭建后台管理 Vite+TS+AntdesignUI -01
m0_72393122的博客
04-26 424
React-18搭建后台管理 Vite+TS+AntdesignUI -01
【总结】1627- React18 + Vite + TypeScript 项目经验总结
pingan8787
03-18 224
当前找工作环境恶劣，很多求职者表示招聘不仅要求会 vue，还要求会 react。刚好这段时间我用 React18 + Vite + TS 为公司从 0 到 1 开发了一个项目，就顺便总结了一些前端开发知识和技巧，帮助我记忆这些知识的同时，希望能对你也有所启发。欢迎评论区交流。我会把代码（当然不是真实项目的。。）上传到 GitHub 上，文末可以取链接。最后还请多多评论、点赞支持！废话不多说，下面开...
vite+react搭建管理后台
09-17
搭建管理后台使用Vite React可以按照以下步骤进行： 1. 安装Node.js和npm：首先需要安装最新版本的Node.js和npm。 2. 创建项目目录：使用命令行进入到要创建项目的目录，并执行以下命令创建一个新的Vite React项目...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值