next.js报错点

next.js报错点

  • 1.类型“{ children: ReactNode; }”与类型“IntrinsicAttributes”不具有相同的属性。
  • 2. 不能将类型“void[]”分配给类型“ReactNode”?
  • 3.useRouter only works in Client Components. Add the "use client" directive at the top of the file to use it.
  • 4. 类型“HTMLInputElement”上不存在属性“target”。

1.类型“{ children: ReactNode; }”与类型“IntrinsicAttributes”不具有相同的属性。

在这里插入图片描述
解决方案
1.大概是引用的组件和本组件重名了,换成其他的就可以
在这里插入图片描述

2. 不能将类型“void[]”分配给类型“ReactNode”?

在这里插入图片描述
解决方案

我一开始定义的navs是数组类型。
在这里插入图片描述
在React中,void[] 是一个数组,它没有元素。由于它没有元素,所以不能将其分配给 ReactNode 类型。

在React中,ReactNode 是所有允许的子节点的类型标签。这两个类型不兼容,因为 ReactNode 是一个更宽泛的类型,可以包含多种类型的值,而你提供的类型是一个对象数组。

所以,你不能直接将一个没有元素的数组(void[])分配给 ReactNode[],大概是识别不到是个数组。

修改后:
在这里插入图片描述
在这里插入图片描述

3.useRouter only works in Client Components. Add the “use client” directive at the top of the file to use it.

在这里插入图片描述

解决方案
在文件顶部添加{/* use client */},您告诉Next.js该组件需要在客户端上运行,从而可以正确地使用useRouter。

useRouter只能在使用客户端的Next.js应用中使用。这通常意味不能在服务器端渲染(SSR)的组件中使用useRouter。
在这里插入图片描述

4. 类型“HTMLInputElement”上不存在属性“target”。

在这里插入图片描述
解决方案
在这里插入图片描述
配置ESLint规则

在.eslintrc.json文件中:
在这里插入图片描述

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

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

相关文章

【LeetCode 】数组简介

集合列表和数组 本文中介绍的概念为适用于所有编程语言的抽象理论,具体实现会由编程语言的不同而稍有差别。 具体介绍数组之前,我们先来了解一下集合、列表和数组的概念之间的差别。 集合 集合一般被定义为:由一个或多个确定的元素所构成的…

AE各个版本号对应

用于版本转换 2007年7月 After Effects CS3(After Effects 8.0) 2008年9月 After Effects CS4(After Effects 9.0) 2011年4月 After Effects CS5(After Effects 10.0) 2012年4月 After Effects CS6&…

TypeScript封装Axios

TypeScript封装Axios Axios的基本使用 因axios基础使用十分简单,可参考axios官方文档,这里不在介绍他基本用法,主要讲解拦截器。 拦截器主要分为两种,请求拦截器和响应拦截器。 请求拦截器:请求发送之前进行拦截&…

详解单体架构和微服务(概念,优缺点和区别)

单体架构和微服务 单体架构和微服务架构区别?为什么要用微服务架构? 单体架构的整个系统是一个War包,即war包走天下。微服务架构的项目是很多个war包(一个子系统一个)。 单体架构的优点: 架构简单开发测试部署简单…

Python读取Excel:实现数据高效处理的利器

目录 一、Python读取Excel的常用库二、Python读取Excel的步骤三、具体案例和使用场景四、Python读取Excel的优势与其他编程语言比较 摘要 本文将介绍Python读取Excel的方法,并通过具体案例和使用场景展示如何实现数据高效处理。我们将介绍常用的Python库&#xff0c…

[docker][WARNING]: Empty continuation line found in:

报警内容: 下面展示一些 内联代码片。 //执行 sudo docker build ubuntu:v1.00 . [WARNING]: Empty continuation line found in:出现上述错误原因为18行多了一个 " \" 符号,去除即可

macOS nginx部署前端项目

1、安装nginx; brew install nginx2、配置nginx,主要配置代码,服务器代理 1、配置文件地址 根目录是 macOS 文件系统的最顶层目录。您可以在 Finder 中使用快捷键 Shift Command G,然后输入 /usr,即可直接打开 /u…

c++ qt--QString,弹出框(第二部分)

c qt–QString&#xff0c;弹出框&#xff08;第二部分&#xff09; 一.QString 1.所用头文件 #include<QString>2.功能 1.初始化 可以用字符&#xff0c;常量字符串、字符指针、字符数组等类型给QString进行初始化 QString str2"4567";//进行初始化2.拼…

卷积神经网络实现天气图像分类 - P3

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f366; 参考文章&#xff1a;Pytorch实战 | 第P3周&#xff1a;彩色图片识别&#xff1a;天气识别&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制&#x1f680; 文章来源&#xff…

【LeetCode75】第三十五题 统计二叉树中好节点的数目

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 给我们一棵二叉树&#xff0c;让我们统计这棵二叉树中好节点的数目。 那么什么是好节点&#xff0c;题目中给出定义&#xff0c;从根节点…

1782. 统计点对的数目

给你一个无向图&#xff0c;无向图由整数 n &#xff0c;表示图中节点的数目&#xff0c;和 edges 组成&#xff0c;其中 edges[i] [ui, vi] 表示 ui 和 vi 之间有一条无向边。同时给你一个代表查询的整数数组 queries 。 第 j 个查询的答案是满足如下条件的点对 (a, b) 的数…

MySQL图形化管理工具

MySQL图形化管理工具极大地方便了数据库的操作与管理&#xff0c;常用的图形化管理工具有&#xff1a;MySQL Workbench、phpMyAdmin、Navicat Preminum、MySQLDumper、SQLyog、dbeaver、MySQL ODBC Connector。 工具1&#xff1a;MySQL Workbench MySQL官方出品的工具。 工具…

实现高效消息传递:使用RabbitMQ构建可复用的企业级消息系统

文章目录 前言1.安装erlang 语言2.安装rabbitMQ3. 内网穿透3.1 安装cpolar内网穿透(支持一键自动安装脚本)3.2 创建HTTP隧道 4. 公网远程连接5.固定公网TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址 前言 RabbitMQ是一个在 AMQP(高级消息队列协议)基…

【Linux】动态库和静态库

动态库和静态库 软链接硬链接硬链接要注意 自定义实现一个静态库(.a)解决、使用方法静态库的内部加载过程 自定义实现一个动态库&#xff08;.so&#xff09;动态库加载过程 静态库和动态库的特点 软链接 命令:ln -s 源文件名 目标文件名 软链接是独立连接文件的&#xff0c;他…

Servlet+JDBC实战开发书店项目讲解第15讲:项目开发总结

ServletJDBC实战开发书店项目讲解第15讲&#xff1a;项目开发总结 在本篇博客中&#xff0c;我们将对我们开发的书店管理系统进行详细总结。主要内容包括前后端的总结&#xff0c;从需求分析到编码实现&#xff0c;测试&#xff0c;最后上线的整个开发过程。 需求分析 在项目…

MongoDB +Dataframe+excel透视表

读取MongoDB中的表 from pymongo import MongoClient import pandas as pd client MongoClient(IP地址, 27017)db client[AOI] collection db[表名] #替换为实际的名称 document collection.find({time:{$gte:2023-08-15 15:26:06}})#筛选数据 df pd.DataFrame(list(docu…

Tomcat运行后localhost:8080访问自己编写的网页

主要是注意项目结构&#xff0c;home.html放在src/resources/templates下的home.html下&#xff0c;application.properties可以不做任何配置。还有就是关于web包的位置&#xff0c;作者一开始将web包与tabtab包平行&#xff0c;访问8080出现了此类报错&#xff1a; Whitelabel…

c++ qt--页面布局(第五部分)

c qt–页面布局&#xff08;第五部分&#xff09; 一.页面布局 在设计页面的左侧一栏的组件中我们可以看到进行页面布局的一些组件 布局组件的使用 1.水平布局 使用&#xff1a;将别的组件拖到水平布局的组件中即可&#xff0c;可以选择是在哪个位置 2.垂直布局 使用&…

【业务功能篇81】微服务SpringCloud-ElasticSearch-Kibanan-docke安装-入门实战

ElasticSearch 一、ElasticSearch概述 1.ElasticSearch介绍 ES 是一个开源的高扩展的分布式全文搜索引擎&#xff0c;是整个Elastic Stack技术栈的核心。它可以近乎实时的存储&#xff0c;检索数据&#xff1b;本身扩展性很好&#xff0c;可以扩展到上百台服务器&#xff0c;…

GB28181设备接入侧如何对接外部编码后音视频数据并实现预览播放

技术背景 我们在对接GB28181设备接入模块的时候&#xff0c;遇到这样的技术诉求&#xff0c;好多开发者期望能提供编码后&#xff08;H.264/H.265、AAC/PCMA&#xff09;数据对接&#xff0c;确保外部采集设备&#xff0c;比如无人机类似回调过来的数据&#xff0c;直接通过模…