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

news2024/12/20 18:08:40

须知

1 Next.js 官网(英文) Next.js by Vercel - The React Framework
2 Next.js 文档(中文) 简介 | Next.js 中文文档
3 React官网(中文) https://react.docschina.org/learn
4 Ant Design组件总览 组件总览 - Ant Design
5 tailwindcss类名大全 · 官网·英

Justify Content - TailwindCSS中文文档 | TailwindCSS中文网

6 tailwindcss类名大全 · 官网·中 https://tailwind.nodejs.cn/docs/flex
7 tailwindcss常用类名 TailwindCSS常用类大全_tailwindcss border-CSDN博客
8 react菜鸟教程 React 列表 & Keys | 菜鸟教程
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

18. React自定义组件onClick事件无效的解决办法

19. React-antd组件库 - 让Menu子菜单项水平排列 - 下拉菜单排序 - 自定义子菜单展示方式

20. react antd修改modal模态框的contentBg背景色 - 自定义model的background-color - antd的主题变量(Design Token)使用方法

21. react循环数组输出dom - for - foreach - loop - map

22. 函数式组件启用onClick事件 - react不能给组件绑定点击事件吗? - 报错Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

23. nextjs react 出现报错 Warning: Extra attributes from the server: mpa-version,mpa-extension-id - at body at html ...

24. tsx - typescript引起的打包报错:Type error: Property 'xx' does not exist on type 'never'.

版本

  "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/

参考 basePath | Next.js 中文网

修改/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 基本路由跳转:

路由结构

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

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

相关文章

【十进制整数转换为其他进制数——短除形式的贪心算法】

之前写过一篇用贪心算法计算十进制转换二进制的方法&#xff0c;详见&#xff1a;用贪心算法计算十进制数转二进制数&#xff08;整数部分&#xff09;_短除法求二进制-CSDN博客 经过一段时间的研究&#xff0c;本人又发现两个规律&#xff1a; 1、不仅仅十进制整数转二进制可…

企业内训|阅读行业产品运营实战训练营-某运营商数字娱乐公司

近日&#xff0c;TsingtaoAI公司为某运营商旗下数字娱乐公司组织的“阅读行业产品运营实战训练营”在杭州落下帷幕。此次训练营由TsingtaoAI资深互联网产品专家程靖主持。该公司的业务骨干——来自内容、市场、业务、产品与技术等跨部门核心岗位、拥有8-10年实战经验的中坚力量…

pinctrl子系统学习笔记

一、背景 cpu的gpio引脚可以复用成多个功能&#xff0c;如可以配置成I2C或者普通GPIO模式。配置方式一般是通过写引脚复用的配置寄存器&#xff0c;但是不同芯片厂商配置寄存器格式内容各不相同&#xff0c;设置引脚复用无法做到通用且自由的配置&#xff0c;只能在启动初始化…

免费开源了一个图床工具 github-spring-boot-starter

文章目录 第一步&#xff0c;新建一个SpringBoot项目第二步&#xff0c;在pom文件里面引入jar包第三步&#xff0c;配置你的github信息github.authorization1、进入github官网&#xff0c;登录账号&#xff0c;点击头像&#xff0c;选择setting2、选择[Developer Settings](htt…

JVM系列之内存区域

每日禅语 有一位年轻和尚&#xff0c;一心求道&#xff0c;多年苦修参禅&#xff0c;但一直没有开悟。有一天&#xff0c;他打听到深山中有一古寺&#xff0c;住持和尚修炼圆通&#xff0c;是得道高僧。于是&#xff0c;年轻和尚打点行装&#xff0c;跋山涉水&#xff0c;千辛万…

自动驾驶AVM环视算法--python版本的俯视碗型投影模式

c语言版本和算法原理的可以查看本人的其他文档。《自动驾驶AVM环视算法--3D碗型投影模式的exe测试工具》本文档进用于展示部分代码的视线&#xff0c;获取方式网盘自行获取&#xff08;非免费介意勿下载&#xff09;&#xff1a;链接: https://pan.baidu.com/s/1STjUd87_5wDk_C…

【并发容器】源码级ConcurrentHashMap详解(java78)

1. ConcurrentHashMap 为什么要使用ConcurrentHashmap 在多线程的情况下&#xff0c;使用HashMap是线程不安全的。另外可以使用Hashtable&#xff0c;其是线程安全的&#xff0c;但是Hashtable的运行效率很低&#xff0c;之所以效率低下主要是因为其实现使用了synchronized关…

程序设计考题汇总(四:SQL练习)

文章目录 查询结果限制返回行数 查询结果限制返回行数 select device_id from user_profile LIMIT 2;

Alan Chhabra:MongoDB AI应用程序计划(MAAP) 为客户提供价值

MongoDB全球合作伙伴执行副总裁 Alan Chhabra 每当有人向我问询MongoDB&#xff0c;我都会说他们很可能在不觉之间已经与MongoDB有过交集。事实上&#xff0c;包括70%财富百强在内的许多世界领先企业公司都在使用MongoDB。我们在MongoDB所做的一切都是为了服务客户&#xff0c…

centos使用mkisofs构建无人值守镜像(附官方学习文档)

安装mkisofs yum install -y mkisofs 挂载镜像并确认 并拷贝文件(/mnt 为我们的工作目录) 1.3 准备自动应答文件(保存为 ins.ks) 修改系统引导 实际上就是添加inst.ks 这个引导参数 传递应答文件 传统模式引导

jenkins pipeline打包流程

Jenkins Pipeline 是 Jenkins 提供的一种用于持续集成和持续交付&#xff08;CI/CD&#xff09;的脚本化流程工具。它允许你通过编写一个 Jenkinsfile 文件来定义整个构建、测试和部署的流程。本文介绍打包springcloud项目&#xff0c;react项目为docker镜像 文章目录 1.项目结…

【容器】k8s学习笔记原理详解(十万字超详细)

Pod详解 Pod介绍 Pod结构 每个Pod中都可以包含一个或者多个容器&#xff0c;这些容器可以分为两类&#xff1a; 用户程序所在的容器&#xff0c;数量可多可少Pause容器&#xff0c;这是每个Pod都会有的一个根容器&#xff0c;它的作用有两个&#xff1a; 可以以它为依据&am…

用.Net Core框架创建一个Web API接口服务器

我们选择一个Web Api类型的项目创建一个解决方案为解决方案取一个名称我们这里选择的是。Net 8.0框架 注意&#xff0c;需要勾选的项。 我们找到appsetting.json配置文件 appsettings.json配置文件内容如下 {"Logging": {"LogLevel": {"Default&quo…

多音轨视频使用FFmpeg删除不要音轨方法

近期给孩子找宫崎骏动画&#xff0c;但是有很多是多音轨视频但是默认的都是日语&#xff0c;电视上看没办法所以只能下载后删除音轨文件只保留中文。 方法分两步&#xff0c;先安装FFmpeg在转文件即可。 第一步FFmpeg安装 FFmpeg是一个开源项目&#xff0c;包含了处理视频的…

Ubuntu22.04切换gcc版本教程

在编译安装程序的时候,由于gcc版本过高,导致编译无法通过,需要降低gcc版本。 一、安装gcc版本 根据自己的需求安装gcc版本。 sudo apt update sudo apt install gcc-10 g++-10二、切换gcc版本 sudo update-alternatives --install /usr/bin/gcc gcc

[SZ901] JTAG合并功能(类似FPGA菊花链)

SZ901 JTAG支持将JTAG端口组合&#xff0c;最多将四个JTAG变成一个 设置如下 Vivado 识别结果如下 两块板子&#xff0c;变成一组&#xff0c;&#xff0c;可以同时抓取信号&#xff0c;调试&#xff01; SZ901 已上架淘宝&#xff0c;搜素“SZ901”哦

【收藏】Cesium 限制相机倾斜角(pitch)滑动范围

1.效果 2.思路 在项目开发的时候&#xff0c;有一个需求是限制相机倾斜角&#xff0c;也就是鼠标中键调整视图俯角时&#xff0c;不能过大&#xff0c;一般 pitch 角度范围在 0 至 -90之间&#xff0c;-90刚好为正俯视。 在网上查阅了很多资料&#xff0c;发现并没有一个合适的…

如何解决samba服务器共享文件夹不能粘贴文件

sudo vim /etc/samba/smb.conf在samba的配置文件中增加一个选项 writable yes重启Samba服务以使更改生效&#xff1a; sudo service smbd restart

数据结构简介:结构创造效率

一、数据结构的本质 数据结构是组织大量数据的方法&#xff08;data structures&#xff1a;methods of organizing large amounts of data &#xff09;。 根据这个定义&#xff0c;一条数据&#xff0c;就不能构成数据结构。 因为结构是数据与数据之间的关联&#xff0c;…

【经验分享】容器云运维的知识点

最近忙于备考没关注&#xff0c;有次点进某小黄鱼发现首页出现了我的笔记还被人收费了 虽然我也卖了一些资源&#xff0c;但我以交流、交换为主&#xff0c;笔记都是免费给别人看的 由于当时刚刚接触写的并不成熟&#xff0c;为了避免更多人花没必要的钱&#xff0c;所以决定公…