React简单入门 - [Next.js项目] - 页面跳转、AntD组件、二级目录等

须知

1Next.js 官网(英文)https://nextjs.org/
2Next.js 文档(中文)https://nextjscn.org/docs/
3Ant Design组件总览https://ant-design.antgroup.com/components/overview-cn
4tailwindcss类名大全 · 官网

https://www.tailwindcss.cn/docs/justify-content

5tailwindcss常用类名https://blog.csdn.net/delete_you/article/details/129965712
1参考项目 - Nextjs构建的电子商务应用程序 (Ecommerce-2023)
2参考项目 - 12个快速学会 NextJS 的 Github 仓库

react v19和antd诸多冲突,建议回退next.js v14 (配套react v18)

npx create-next-app@14.2.20

实现目标

0. 添加二级目录 - 项目打包后运行在https://xx.com/sub-folder/

1. 应用内页面跳转

2. 简单路由

3. 集成UI组件AntD

4. 在Next.js+AppRouter环境下使用AntD的子组件 (如Input下的TextArea) 

5. 穿透antd组件,修改css,“:global”的使用方法

6. 页面变量,点击事件,请求处理

7. 变量导致的报错"It only works in a Client Component but none of its parents are marked with “use client“"

8. AntD的按钮button绑定onClick后无限死循环 - 报错 - unhandledRejection: Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

9. AntD顶部通知 滚动通知 警告实现 alert message notice

10. Next.js报错 SSR导致的问题 “Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used”

11. Next.js报错 react19的error “intercept-console-error.js:56 Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release. error@intercept-console-error.js:56”

12. axios请求 / ajax请求

13. utils/fns实现

14. antd系列“card”卡片组件右上角副标题怎么自定义不同按钮 extra对象数组

15. React的显示隐藏控制 (v-if v-show)

16. nextjs build关闭eslint

17. React的复制功能 - 复制到剪切板 - copy

版本

  "dependencies": {

    "@ant-design/icons": "^5.5.2",

    "@ant-design/nextjs-registry": "^1.0.2",

    "antd": "^5.22.4",

    "axios": "^1.7.9",

    "next": "14.2.20",

    "react": "^18",

    "react-dom": "^18"

  },

  "devDependencies": {

    "@types/node": "^20",

    "@types/react": "^18",

    "@types/react-dom": "^18",

    "eslint": "^8",

    "eslint-config-next": "14.2.20",

    "postcss": "^8",

    "tailwindcss": "^3.4.1",

    "typescript": "^5"

  }

具体操作

0. 添加二级目录 - 项目打包后运行在https://xx.com/sub-folder/

参考 https://next.nodejs.cn/docs/app/api-reference/config/next-config-js/basePath

修改/next.config.ts,在nextConfig中写入 basePath: '/sub-folder'

1. 应用内页面跳转

import Link from 'next/link'
<Link href="/my">我的</Link>

应用外链接,可以用<a href="...">xx</a>
https://nextjscn.org/docs/app/building-your-application/routing/linking-and-navigating#link-组件

2. 简单路由

Next.js 基本路由跳转:

路由结构
https://nextjscn.org/docs/app/building-your-application/routing/defining-routes
例如:
应用首页 = /app/page.jsx 【后缀可以是jsx或者tsx】
个人首页 = /app/my/page.jsx 
个人订单 = /app/my/order/page.jsx 
那么,跳转方式就是
<Link href="/my">我的</Link>
<Link href="/my/order">我的订单</Link>

3. 集成UI组件AntD

参考 https://ant-design.antgroup.com/docs/react/use-with-next-cn

1. 安装antd组件
npm install antd --save2. 使用antd组件 - (修改/app/*/page.tsx 或jsx)
import { Button } from 'antd';
嵌套<Button type="primary">Button</Button>3. 特别注意!
如果使用了App Router,需要安装“nextjs-registry”:
npm install @ant-design/nextjs-registry --save
然后修改app/layout.tsx:
import { AntdRegistry } from '@ant-design/nextjs-registry';
将{children}使用此标签嵌套,例如:
<AntdRegistry>{children}</AntdRegistry>

AntD组件大全: 组件总览 - Ant Design

4. 在Next.js+AppRouter环境下使用AntD的子组件 (

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/63846.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java中的“泛型“

泛型&#xff08;Generics&#xff09;是Java中的一种重要特性&#xff0c;它允许在定义类、接口和方法时使用类型参数&#xff08;type parameters&#xff09;。泛型的主要目的是提高代码的类型安全性和重用性。下面我将详细讲解Java中的泛型。 1. 泛型的基本概念 泛型允许我…

Python知识分享第25天-快速排序算法

快速排序算法 快速排序&#xff08;QuickSort&#xff09;是一种基于分治法的高效排序算法。它通过选择一个“基准”元素&#xff0c;将数组分成两个子数组&#xff0c;其中一个子数组的所有元素都比基准小&#xff0c;另一个子数组的所有元素都比基准大&#xff0c;然后递归地…

PyTorch练习——张量的四则运算与矩阵运算

练习1&#xff1a; # 导入Torch库 import torch# 创建两个张量 x torch.tensor([1, 2, 3]) y torch.tensor([4, 5, 6])# 执行加法操作 z torch.add(x, y) print("加法结果&#xff1a;", z)# 执行减法操作 z torch.subtract(x, y) print("减法结果&#xf…

String【Redis对象篇】

&#x1f3c6; 作者简介&#xff1a;席万里 ⚡ 个人网站&#xff1a;https://dahua.bloggo.chat/ ✍️ 一名后端开发小趴菜&#xff0c;同时略懂Vue与React前端技术&#xff0c;也了解一点微信小程序开发。 &#x1f37b; 对计算机充满兴趣&#xff0c;愿意并且希望学习更多的技…

C# 上位机项目开发实例全解析

一、项目规划与需求分析 功能确定 数据监控&#xff1a; 明确需采集和展示的设备数据种类&#xff0c;如温度、压力数值。规划数据的实时更新频率&#xff0c;保证监控的时效性。控制操作&#xff1a; 列出上位机对下位机的控制功能&#xff0c;如设备的启动与停止。设计控制指…

我们来学mysql -- MSI安装(安装篇)

主题 书接上文&#xff0c;在《探讨win安装方式》中官方推荐MSI要是把大厂的标准奉为圭臬&#xff0c;说啥认啥&#xff0c;他一翻脸&#xff0c;小丑不就是咱了再说了&#xff0c;都干到家门口了8.4版本官方文档&#xff0c;还不给他梭罗下 MSI 点击**.msi弹出MySQL Install…

2024年12月六级写作复习资料

1 如何看待”社交搭子“的现象 1.1 范文 In the rapid pace of modern life, emerging as a novel social model, “da zi socializing” is gaining increasing popularity among young people. It breaks free from the constraints of traditional social interactions, c…

【IC面试问题:UCIE PHY LSM AXI Cache】

IC面试问题&#xff1a;UCIE PHY LSM && AXI && Cache 1 UCIE PHY LSM有几种状态&#xff1f; 以及L1和L2这两种低功耗状态有什么区别&#xff1f;2 AXI的特性&#xff1f; 通道之间有依赖关系吗&#xff1f; master和slave的valid和ready关系&#xff1f; 写数…

C++ 中多态性在实际项目中的应用场景

背景与需求 在一个图形绘制软件中&#xff0c;需要绘制多种不同的图形&#xff0c;如圆形、矩形、三角形等。每个图形都有自己的绘制方法&#xff0c;但是它们都可以被看作是一个抽象的 “图形” 概念&#xff0c;并且都有一个共同的操作&#xff0c;比如绘制&#xff08;draw&…

html|本地实现浏览器m3u8播放器,告别网络视频卡顿

前言 网络上经常是以m3u8文件传输视频流的 &#xff0c;但是有时网络慢往往导致视频播放卡顿。于是我在想能不能先下载然后再播放呢&#xff1f;于是尝试下载然后实现本地播放m3u8视频。 正文 1.找到网络视频流的m3u8连接 一般在浏览器按F12就可以看到有请求视频流的连接。 …

交互开发---测量工具(适用VTK或OpenGL开发的应用程序)

简介&#xff1a; 经常使用RadiAnt DICOM Viewer来查看DICOM数据&#xff0c;该软件中的测量工具比较好用&#xff0c;就想着仿照其交互方式自己实现下。后采用VTK开发应用程序时&#xff0c;经常需要开发各种各样的测量工具&#xff0c;如果沿用VTK的widgets的思路&#xff0c…

VirtIO实现原理之数据结构与数据传输演示(4)

接前一篇文章:VirtIO实现原理之数据结构与数据传输演示(3) 本文内容参考: VirtIO实现原理——vring数据结构-CSDN博客 VirtIO实现原理——数据传输演示-CSDN博客 特此致谢! 一、数据结构总览 2. 相关数据结构 前文书介绍了《Virtual I/O Device (VIRTIO) Version 1.3…

【蓝桥杯每日一题】技能升级

技能升级 2024-12-10 蓝桥杯每日一题 技能升级 二分 题目大意 一个角色有 N 种可以增加攻击力的技能&#xff0c;对于第 i 个技能首次升级可以提升 A i A_i Ai​ 点攻击力&#xff0c;随后的每次升级增加的攻击力都会减少 B i B_i Bi​ 。升级 ⌈ A i B i ⌉ \lceil \frac{A…

uniapp -- 实现页面滚动触底加载数据

效果 首选,是在pages.json配置开启下拉刷新 {"path": "pages/my/document/officialDocument","style": {"navigationStyle":</

角色动起来

GitHub - LordLiang/DrawingSpinUp: (SIGGRAPH Asia 2024) This is the official PyTorch implementation of SIGGRAPH Asia 2024 paper: DrawingSpinUp: 3D Animation from Single Character Drawings

MySQL 时区参数 time_zone 详解

文章目录 前言1. 时区参数影响2. 如何设置3. 字段类型选择 前言 MySQL 时区参数 time_zone 有什么用&#xff1f;修改它有什么影响&#xff1f;如何设置该参数&#xff0c;本篇文章会详细介绍。 1. 时区参数影响 time_zone 参数影响着 MySQL 系统函数还有字段的 DEFAULT CUR…

【信息系统项目管理师】论文:论信息系统项目的整合管理

文章目录 正文一、制定项目章程二、指定项目管理计划三、指导与管理项目工作四、管理项目知识五、监控项目工作六、实施整体变更控制七、结束项目或阶段 正文 根据省自然资源厅的总体部署&#xff0c;XX市决定于2023年8月开始全市不动产登记系统建设&#xff0c;要求在2024年8…

漫谈前端:2025年框架是该选vue还是react?

相信很多前端小伙伴都有过纠结的时候&#xff0c;开始一个项目的时候是该选vue还是react。很多情况下&#xff0c;都是根据团队现有框架延续&#xff0c;或者是自身数量度。渐渐的公司组件和规范全基于某一种框架&#xff0c;虽然很爽但Allin难掉头。本文就浅浅的比较下vue和re…

导游现场面试需要注意的问题

今天给大家带来一些导游现场面试需要注意的问题&#xff0c;大部分的城市导游考试已经考完了&#xff0c;但是还有一些城市的十二月份才考&#xff0c;有需要的朋友们赶紧来看&#xff0c;有备无患。 01、做好充足准备 认真准备做好每个景点的讲解介绍&#xff0c;不要抱有侥幸…

SQL 查询中的动态字段过滤

这段代码是一个 SQL 查询中的动态字段过滤部分&#xff0c;使用了 MyBatis 的 标签和 标签。以下是逐步的解释&#xff1a; <!-- 动态字段过滤 --><if test"parameters ! null and parameters.size() > 0"><foreach collection"parameters&qu…