“xxx”在函数“xxxx”中被调用，该函数既不是React函数组件，也不是自定义的React Hook函数。

最新推荐文章于 2024-08-25 09:57:22 发布
最新推荐文章于 2024-08-25 09:57:22 发布
阅读量185 收藏
点赞数
文章标签： react.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49789433/article/details/128535039
版权
文章讲述了在React应用中使用useLocation钩子时遇到的错误，错误提示表明函数组件名未大写或非ReactHook。解决方案是确保组件名称以大写字母开头，且正确使用ReactHooks。作者分享了初次学习React时的误解，强调了命名规范的重要性。
摘要由CSDN通过智能技术生成

react 使用  useLocation 报错如下

 意思是：

“useLocation”在函数“routerDemo”中被调用，该函数既不是React函数组件，也不是自定义的React Hook函数。React组件名称必须以大写字母开头。React钩子名称必须以“use”开头

解决办法：

 

 这个位置改成大写

一直被 React组件名称必须以大写字母开头这句话误解了还以为是这个引用应该大学  第一次学react啊哈哈哈

南玖i
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
useLocation()只能在＜Router＞组件的上下文中使用。
skylar的博客
07-03 1493
【代码】useLocation()只能在组件的上下文中使用。
1.React hooks——useLocation踩坑记录
qq_41066519的博客
05-27 2112
是 React Router 库中提供的一个钩子函数，用于在函数式组件中获取当前页面的 URL 地址信息。它返回一个包含当前路径、搜索参数和哈希值等信息的 location 对象。可用于路由组件获取当前路径或在两个路由组件之间传递参数（但参数最好不要过大）。
react初学踩坑记录1
weixin_46057852的博客
12-12 599
react,useNavigate,react初学
location对象与useLocation()的使用
sakura的博客
05-09 1万+
location对象与useLocation()的使用
useNavigate() may be used only in the context of a ＜Router＞ component.
慢慢manman的博客
10-11 5755
第一步：将index.js文件React应用包裹到Router中的例子，整个应用都会被Router组件所包裹，之后就可以随时随地的在组件中使用react router所提供的钩子。警告，是因为useNavigate只能在Router上下文中使用useNavigate 钩子。在react项目中配置路由，使用编程式导航。函数用来实现编程导航的跳转时。第二步：在组件中正常使用。
react-react面试题之对类组件和函数组件的理解.zip
03-20
函数组件，也称为无状态组件，是React中最简单的组件形式。它本质上是一个JavaScript函数，接收props（属性）作为输入，并返回React元素作为输出。函数组件没有自己的状态（state），不支持生命周期方法，因此它们...
详解React中setState回调函数
08-27
React中setState回调函数是React框架中的一种重要机制，用于更新组件的状态。setState函数是异步的，因此在使用时需要特别注意。下面将详细介绍setState回调函数的使用方法和注意事项。 首先，setState函数的语法是...
深入理解React中何时使用箭头函数
12-12
在这个例子中，`handleClick`不是一个箭头函数，因此`this`在回调中不是预期的组件实例，导致`setState`无法正常工作。要修复这个问题，我们可以将`handleClick`改为箭头函数： ```jsx class Button extends React....
详解使用React.memo()来优化函数组件的性能
10-17
这个生命周期方法在React的类组件中被广泛使用，它的作用是在组件即将更新时判断是否真正需要重新渲染。默认情况下，如果组件的props或state有任何变化，React都会认为组件需要更新。但是，通过自定义`...
React Hook “useState“ is called in function “xxx“ which is neither a React function component or解决办法
热门推荐
feinifi的博客
08-27 1万+
如题所示，在React开发中，我们会自定义一些函数，比如hook函数，或者组件，当我们使用了useState,useEffect等这些hook函数的时候，可能会报错，如下所示，是一个完整的报错信息截图： 报错信息很明确，就是loadData函数既不是一个React组件，也不是一个Hook函数。React默认组件是使用的大写字母开头，而自定义Hook函数使用的是use开头，所以我们这里需要修改有两种办法，就是将loadData修改为LoadData或者useLoadData，或者useD...
react-router-dom错误
qq_27009517的博客
04-09 3076
index.tsx:24 Uncaught Error: useLocation() may be used only in the context of a <Router> component. at invariant (index.tsx:24) at useLocation (index.tsx:401) at App (App.tsx:18) at renderWithHooks (react-dom.development.js:16141) ...
使用eclipse建立java project 使用use default location时出现Editor does not contain a main type的问题
danlink
08-20 1904
我出现这个现象的原因是java源文件没有在一个包内，一般来说创建一个java project时会自动创建src而你自己编写java文件就是在src中进行。而如果你建立java project时使用的是use default location并且这个文件内只有java源文件时，eclipse就会给你创建一个缺省包default package,如果没有出现缺省包，并且出现src而没有缺省包defau...
react-router实战Hooks之useLocation
蛐蛐的博客
02-12 1万+
1.简介 该useLocation挂钩返回代表当前URL的location对象。您可以将其视为类似于URL更改时useState会返回新值的location。 2.API 位置表示应用程序现在所在的位置，您希望其运行的位置，甚至是以前的位置。看起来像这样： { key: 'ac3df4', // not with HashHistory! pathname: '/somewhere', search: '?some=search-string', hash:...
React useNavigate 和 useLocation的使用
m0_67402236的博客
03-03 1217
useNavigate 用来跳转并传值 // 跳转传值 import { useNavigate } from 'react-router-dom' const navigate = useNavigate(); function clickCityHandle(city) { navigate('/home', { state: { name: 'zhou' } }) } // 接收跳转传过来的值 import { useLocation } from 'react-router-dom'
vue ref和reactive区别
最新发布
灰海
08-25 279
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
React 入门第一天：从Vue到React的初体验
Caleb的博客
08-21 515
作为一名合格的前端工程师，怎么能只会Vue呢？学习React不仅是一场新技术的探索，更是对前端开发思维的一次重新审视。在这里，我将分享学习React的心得，希望能帮助那些和我一样从Vue转向React的开发者。
ReactVChart矩形转化漏斗图配置示例
知识点沉淀包括不限于前端
08-22 338
ReactVChart 矩形转化率 漏斗图 示例
3D场景标注标签信息，three.js CSS 2D渲染器CSS2DRenderer、CSS 3D渲染器CSS3DRenderer（结合react）
weixin_44242600的博客
08-21 1098
CSS2DRenderer、CSS3DRenderer简介说明，threejs实现标签标注的三种方式介绍，react项目中使用CSS2DRenderer、CSS3DRenderer给模型新增标签。
react面试题五
笃励的博客
08-24 876
在React中，高阶组件（High-Order Components, HOCs）和Hooks是两种强大的特性，它们用于重用组件逻辑。尽管它们的目的相似，但它们在实现和使用方式上有所不同。高阶组件是一个函数，这个函数接收一个组件并返回一个新的组件。这个新的组件可以包含原组件的所有功能，并且还可以添加额外的功能或修改原组件的行为。HOC本质上是一个纯函数，没有副作用，它只接收组件作为参数并返回一个新的组件。特点：用途：示例： Hooks Hooks是React 16.8中引入的，允许你在不编写类的情况下使用状
React hook子组件事件代码中调用父组件函数的几种方法
12-02
在React Hook中，子组件调用父组件函数的几种方法如下： 1. 通过props传递函数，子组件调用该函数实现调用父组件函数。 父组件代码： ```javascript import React from 'react'; import Child from './Child'; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值