当前位置: 首页 > news >正文

(三)React+.Net+Typescript全栈(动态Router/Redux/RTK Query获取后端数据)


文章目录

  • 项目地址
  • 一、Router
    • 1.1 创建Router
      • 1. 页面
      • 2. 创建路由
      • 3. Outlet子路由使用
        • 1. 基本使用
        • 2. 嵌套使用
      • 4. 导航栏里使用路由
    • 1.2 动态路由传参
      • 1. 商品列表页传参
      • 2. 商品详情页
  • 二、Redux
    • 2.1 使用Toolkit
      • 1. 定义Reducer
      • 2.2 配置Store
      • 2.3 使用
  • 三、RTK Query
    • 3.1 请求后端数据
      • 1. 创建base请求
      • 2. 请求商品列表和商品详情
      • 3. 在store里注册
      • 4. 请求商品列表
      • 5. 请求商品详情
    • 3.2 添加Loading 动画
      • 1. 创建加载的reducer
      • 2. 在store里注册
      • 3. 添加Loading组件在页面里


项目地址

  • 教程作者:
  • 教程地址:
  • 代码仓库地址:
  • 所用到的框架和插件:
dbt 
airflow

一、Router

在这里插入图片描述

1.1 创建Router

1. 页面

  • 伪页面
    在这里插入图片描述

2. 创建路由

Router.txs里创建路由规则
在这里插入图片描述

3. Outlet子路由使用

1. 基本使用
  • 在App.txs里直接使用
    在这里插入图片描述
2. 嵌套使用
  • 如果在子路由里还有其他的子路由
  • 例如
{path: "/dashboard",element: <DashboardLayout />,children: [{ path: "profile", element: <ProfilePage /> },{ path: "settings", element:</
http://www.dtcms.com/a/397940.html

相关文章:

  • elasticsearch的使用、api调用、更新、持久化
  • Jenkins(速通版)
  • IDEA新建SpringBoot项目时没有低版本Java选项
  • Jupyter Lab 汉化
  • Amazon Chime SDK 详解:AWS 的实时音视频利器
  • python学智能算法(三十八)|使用Numpy和PyTorch模块绘制正态分布函数图
  • 佛山网站建设no.1开源站群cms
  • 阿里云SVN服务器搭建出现svn log messages no date
  • 豆包・图像创作模型Seedream4.0创意玩法大赏:开启 AI 绘画新纪元
  • 强化学习策略梯度算法梳理:从REINFORCE到PPO2(REINFORCE、QAC、A2C、Off-Policy AC、PP01、PPO2))
  • 产品网站开发流程图邹平做网站
  • ruoyi 框架添加新module
  • python解析通达信dat与blk数据文件【附源码】
  • 捕获Mybatis执行的Sql
  • Kubernetes 进阶实战:CRD、Gateway API 与优先级调度
  • Netdata系统监控:30秒定位服务器故障的实践方法
  • 制作 Bash Shell 方式的软件发布安装包的原理和方法
  • 网站标题怎么做链接云服务器建设网站教程
  • 栈-堆理解题(c++)
  • 江西同为科技有限公司亮相2025北京国际两用先进技术装备展览会 —— 致力于电气联接与保护,推动两用技术融合发展
  • 网站首页幻灯片不显示知更鸟wordpress主题
  • React 基础:快速掌握 State、事件和 Hook
  • 烟台网站制作计划wordpress怎么修改logo尺寸
  • Apache Hive 如何在大数据中发挥能量
  • CSS——实现盒子在页面居中
  • RocketMQ相对于RabbitMQ 的优势
  • ELK 企业级日志分析系统(完整版)
  • WaveTerminal+cpolar:提升远程协作效率的开发利器
  • 【记录】Ubuntu系统实现从远程服务器上传下载文件
  • 通过串口控制RDA5807收音模块(stm32+c#上位机)