（三）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:</