不能在react-router-dom组件中使用React钩子
在React中，react-router-dom是一个用于处理路由的库，而React钩子是React 16.8版本引入的一种新特性，用于在函数组件中添加状态和其他React功能。然而，根据React官方文档的说明，React钩子只能在函数组件的顶层使用，不能在任何循环、条件语句或嵌套函数中使用。
因此，在react-router-dom组件中使用React钩子是不被支持的，这可能会导致意料之外的行为或错误。如果需要在路由组件中使用React钩子，可以考虑将路由组件包装在一个函数组件中，并在该函数组件中使用React钩子。
对于React钩子的更多信息和用法，请参考React官方文档：
对于路由的处理，可以使用react-router-dom提供的其他功能，例如Route、Switch、Link等。这些功能可以帮助我们在React应用中实现路由导航和页面切换等功能。
腾讯云提供了一系列与云计算相关的产品，包括云服务器、云数据库、云存储等。具体推荐的产品和产品介绍链接地址可以根据实际需求和场景进行选择。
相关·内容
3回答
TypeError:从react-router使用useParams时，无法读取未定义的属性“”match“”
javascript、reactjs、react-router
我在props.match.params.languagename中使用了道具的方式，它工作得很好。 const topicsState = useSelector(state
浏览 1提问于2019-12-03得票数 12
回答已采纳
2回答
如何在自定义文件中使用useLocation钩子来响应js？
javascript、reactjs、react-hooks
我有一个单独的文件，在这个文件中，我将常用的函数放在我的react项目中，名为MyFunctions.js。在这个文件中，我想使用useLocation钩子获取当前路径名+当前url的查询字符串。但它给出了一个错误
React Hook "useLocation" is called in function "getCurrentURL" that is neither a React functioncomponent nor
浏览 16提问于2022-07-11得票数 0
回答已采纳
1回答
获取关于使用浏览器路由器的空白页，当不使用浏览器路由器进行路由时，该页面正在工作
javascript、reactjs、routes、react-router-dom、react-dom
在吊唁中写着：您可能有React的不匹配版本和呈现器(例如React )，您可能正在违反Hooks的规则，您可能在同一个应用程序中有多个React副本。import { BrowserRouter, Router, Route } fro
浏览 1提问于2022-01-12得票数 0
3回答
无法读取类组件中的历史记录。
javascript、reactjs、react-router
我试图使用按钮单击导航到另一个页面，但是如果说是can not read property push of undefined.，则会引发错误。这是我的密码。import React, { Component } from 'react'; c
浏览 5提问于2021-06-18得票数 1
回答已采纳
2回答
未知错误:无效的钩子调用。只能在试图更改数据的函数组件体内调用钩子。
javascript、reactjs
我正在学习React，在一个应用程序中，我试图改变描述和数量，并添加一个注释，但是每次我尝试，我都会得到一个错误：2.You might have more than one copy of React in the same appimport Rea
浏览 11提问于2022-02-05得票数 0
1回答
为什么反应路由器丢钩无效钩子调用错误？
reactjs、react-hooks、react-router、react-router-dom
警告：无效钩子调用。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一： import { BrowserRouter, Route, Routes } from "react-router-dom";
浏览 1提问于2022-06-06得票数 1
回答已采纳
6回答
试图导入错误：“useRouteMatch”不是从“react路由器-dom”导出的。
reactjs、react-router、react-router-dom
当我尝试从react路由器-dom模块导入useRouteMatch时，我有这个错误，我有以下错误： Switch, Link, useParams
} from "react-router-dom
浏览 6提问于2019-10-15得票数 21
回答已采纳
1回答
通过使用useNavigate()函数，我得到了这个错误
javascript、reactjs
我使用的是useNavigate，这个错误即将出现：import React, { useContext, useEffect } from 'react</em
浏览 4提问于2022-12-01得票数 0
回答已采纳
2回答
将withRouter封装在ES7函数中
reactjs、react-router-dom
我有一个DetailProducts函数，如何在withRouter中包装DetailProducts。谢谢import details from "../../CSS/ProductsCss/details.css";
export default function
浏览 3提问于2021-11-03得票数 0
回答已采纳
3回答
v6历史推送和useNavigate问题
javascript、reactjs、react-router-dom、mobx
我在我的项目中使用了react路由器-dom v6和mobex，当我使用它时会得到一个错误，如下所示。main.tsx：import ReactDOM from 'react-dom/client'import 'react-calendar/dist/Calendar.css
浏览 16提问于2022-07-30得票数 2
回答已采纳
3回答
反应路由器:无效的钩子调用。只能在函数组件的主体内调用钩子。
javascript、reactjs
我有一个正常的反应应用，使用反应路由器。在尝试获取Box.js中的url参数时，我会得到以下错误：无效钩子调用。钩子只能在函数组件的主体内调用。，这是代码：import React from 'react'
浏览 12提问于2021-12-29得票数 0
1回答
如何在React路由器v6中正确获取当前路径名？
javascript、reactjs、react-router
我正在使用一个名为的库来构建我的应用程序布局。我正在应用程序的sidenav中使用它的<ListItemButton>组件。现在。这个组件<ListItemButton>不是链接，它是一个按钮。React组件。我们可以通过比较搜索栏中的URL是否与我们在to支柱中指定的路径相匹配来做到这一点。
下面介绍了为什么希望找到当前使用的path。{NavLink} selected={pathname === "/u
浏览 34提问于2022-05-23得票数 2
回答已采纳
2回答
为什么IntelliJ不自动导入react路由器挂钩？
reactjs、intellij-idea、react-router、importerror、react-router-dom
从v5.1开始，react路由器支持钩子。我的package.json中有"react-router-dom": "^5.1.2"，但在组件中键入useRouterMatch时，IntelliJ不建议自动导入import {useRouteMatch} from "react-router-dom"; 当手动添加导入时，一切正常，但这非常不方便。
浏览 34提问于2019-12-06得票数 0
回答已采纳
2回答
当使用withStyles时，响应路由器不按预期工作
reactjs、react-router
我的问题是当使用withStyles时，响应路由器不能像预期的那样工作。当您点击“主页”链接两次，它将显示第二次空白页。如果我不使用"withStyles“并导出它，它的正常工作比预期的。, Route, Switch } from 'react-router-dom';import { BrowserRouter as Router, Route, Switch, Link } from 'react-ro
浏览 5提问于2019-10-11得票数 0
回答已采纳
2回答
使用自定义组件和额外路径从路由获得id。
reactjs、react-router-dom
我有一个应用程序，使用的反应-路由器-配置，并使用重定向未经认证的用户。import { Route, Redirect } from "react-router-dom";
export default function AuthenticatedRoute"react-router-dom&quo
浏览 3提问于2019-11-18得票数 24
回答已采纳
1回答
为传递反应路由参数而奋斗
reactjs、react-router
<Outlet /> :这是我的登录组件：
class LoginForm extends
浏览 0提问于2021-12-28得票数 0
回答已采纳
1回答
我无法在操作创建者文件中使用useHistory函数。
reactjs、redux、react-redux、react-router
我使用的是react路由器-dom和redux。我在调度后使用history.push("/")，但它显示了错误。我希望用户在成功的身份验证(使用GOOGLE)之后导航到"/“。
浏览 5提问于2021-05-01得票数 2
回答已采纳
1回答
如何传递此错误无效钩子调用。钩子只能在函数组件的主体内调用。我正在使用React18
javascript、reactjs
这是密码import { useParams } from "react-router-dom";import {useNavigate} from 'react-router-dom';
//import { withRouter } from "react
浏览 0提问于2022-09-01得票数 -1
1回答
使用React路由器的条件重定向
javascript、reactjs、redux
我也尝试过props.push历史，但我使用的是redux，当我试图用withRouter包装我的主应用程序时，它导致了问题。我不确定我是不是做错了，但我也担心其他组件是否能正确访问道具。
浏览 14提问于2019-12-18得票数 0
回答已采纳
3回答
useHistory react路由器-dom无效钩子调用
reactjs、react-router、react-hooks、react-router-dom
我正在尝试从react-router-dom实现react-router-dom钩子，但它似乎不起作用。抛出无效钩子调用import React, { Component } from 'react';import { Signup } from './contexts/AuthContext.js';
import { BrowserRouter as Router, Switch,
浏览 5提问于2021-01-01得票数 4
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
