无法在React功能组件中使用useHistory()
在React功能组件中使用useHistory()是因为useHistory()是React Router库中的一个钩子函数，用于在组件中进行路由导航操作。然而，useHistory()只能在类组件或者在函数组件中的子组件中使用，而不能直接在React功能组件中使用。
React功能组件是一种无状态的函数组件，它没有实例化的概念，也没有this关键字。因此，无法直接在React功能组件中使用useHistory()。
解决这个问题的方法是将React功能组件包装在一个Router组件中，然后在该组件中使用useHistory()。Router组件可以是BrowserRouter、HashRouter或MemoryRouter等，具体选择哪个取决于你的项目需求。
以下是一个示例代码：
import React from 'react';
import { BrowserRouter as Router, Route, Switch, useHistory } from 'react-router-dom';
const MyComponent = () => {
const history = useHistory();
// 在这里可以使用history进行路由导航操作
return (
// 组件的 JSX 代码
);
};
const App = () => {
return (
<Router>
<Switch>
<Route exact path="/" component={MyComponent} />
{/* 其他路由配置 */}
</Switch>
</Router>
);
};
export default App;在上述代码中，我们将React功能组件MyComponent包装在BrowserRouter组件中，并在MyComponent组件中使用了useHistory()。这样就可以在React功能组件中使用useHistory()进行路由导航操作了。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb-for-mysql
- 云原生应用引擎 TKE：https://cloud.tencent.com/product/tke
- 人工智能平台 AI 机器学习：https://cloud.tencent.com/product/ti-ml
- 物联网平台（IoT Hub）：https://cloud.tencent.com/product/iothub
- 移动开发平台（MPS）：https://cloud.tencent.com/product/mps
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
使用React功能组件和Typescript，使用useHistory钩子和RouteComponentProps (react路由器v5.1)之间会有什么不同吗？
使用RouteComponentProps的示例：
import { RouteComponentProps } from 'react-router-dom';
interface PropsType extends RouteComponentProps {
text: string;
}
const MyFunctionalComponent = ({
text,
history
浏览 1提问于2020-06-10得票数 3
在React中，我尝试使用history.push传递路径名和另一个参数。当它执行时，应用程序重定向到指定的页面，但状态未定义，因此我无法获得其他参数。
<Route path='/main' exact component={Main} />
import { useHistory } from "react-router-dom";
var history = useHistory();
function handleSubmit(event) {
event.preventDefault();
history.push(&#
浏览 3提问于2021-09-12得票数 2
回答已采纳
当用户单击MUI Datagrid中的按钮时，我试图将数据传递到另一个页面。我使用的是中的useHistory，但我面临的问题是如何实现useHistory。
如何让useHistory在我的函数handleEdit中工作，因为错误显示为"handleEdit，它既不是function函数组件，也不是自定义useHistory函数“。
表组件
import React from "react";
import { useHistory } from "react-router-dom";
import { DataGrid} from "@mui
浏览 13提问于2022-12-02得票数 0
我试图在useHistory钩子中使用react.js，我不明白为什么会出现错误无法响应未定义的属性推送。
代码：
import { useHistory } from "react-router-dom";
function App() {
const [loader, setLoader] = useState(false);
const [errMsg, setErrMsg] = useState("");
const [signinLoader, setsinginLoader] = useState(false);
const [opt
浏览 2提问于2021-08-16得票数 1
回答已采纳
我有这个。它与文档中所述的完全相同。我认为反应性路由器-dom模块很好，因为在其他组件中，BrowserRouter、路由器和链接为我工作。
import { useHistory } from "react-router-dom"
import React from 'react'
export default function HomeButton() {
let history = useHistory()
function handleClick() {
history.push("/home")
}
ret
浏览 0提问于2020-06-27得票数 13
我在使用反应性路由器-dom V5，
在组件中，在呈现时，我必须显示一个按钮，该按钮将将我重定向到另一个组件布局：
我已经说过：
import React, { Component } from 'react';
import DashboardLayout from "../../views-layouts/DashboardLayout";
import { BrowserRouter , Switch ,Route , Link } from 'react-router-dom';
import { useHistory } from &#
浏览 2提问于2021-06-08得票数 0
回答已采纳
1回答
React.js变更页
、、、
我编写了一个登录面板，需要通过history.Push()更改页面，但是有一个错误：
React "useHistory“不能在顶层调用。必须在React函数组件或自定义React函数中调用。
import react from 'react';
import{landingPage, adminPage} from './components';
import { Route,Router, Switch } from 'react-router-dom';
import {useHistory} f
浏览 3提问于2021-08-11得票数 0
2回答
我实现的useHistory()和下面实现的一样，以前我没有收到任何错误，但是在这个示例中，我得到了一个错误
第6:18行: React "useHistory“在函数"showPost”中被调用，该函数既不是function函数组件，也不是自定义React函数function钩子/规则的钩子。
import React from 'react';
import CloseIcon from '@material-ui/icons/Close';
import {useHistory} from 'react-router-dom
浏览 0提问于2020-10-20得票数 3
React Hook "useHistory“在函数"header”中调用，该函数既不是React函数组件，也不是自定义React Hook函数 下面是我的代码 import { Link, useHistory } from 'react-router-dom'
function header() {
let history = useHistory()
return (
<header>
<div className="header_buttons">
浏览 42提问于2020-10-19得票数 0
回答已采纳
2回答
App.tsx
import React from 'react';
import {
BrowserRouter as Router,
Redirect,
Route,
Switch
} from 'react-router-dom';
import './app.css';
import Login from './auth/pages/login';
import DashBoard from './dashboard/dashboard';
export const App = () =
浏览 14提问于2020-02-04得票数 1
回答已采纳
我试图链接到我的应用程序中的某个地方--在appBar/header中使用react路由器-dom，该应用程序在整个应用程序中都是持久化的。当我试图在标头组件中使用TypeError时，我一直得到“RRD : history是未定义的”。
我已经玩了好几个小时了，但我没有得到任何进展。由于酷热，我无法直截了当地思考，而且在我的搜索中我显然是在寻找错误的答案。到目前为止，我想出的最好的解决方案是让每个组件在顶部包含标头组件，但这并不理想。我知道我一定错过了一些简单的东西，因为这不可能是一个不寻常的模式。
演示代码
节点内容
npx create-react-app rdr-header
浏览 6提问于2021-05-31得票数 0
回答已采纳
1回答
在我的react应用程序中，我使用useHistory钩子重定向到我的Home组件。为什么useHistory是未定义的，我该如何解决这个问题？ App.js import 'bootstrap/dist/css/bootstrap.css'
import React from "react";
import { Button } from 'react-bootstrap';
import { BrowserRouter, Route, useHistory} from 'react-router-dom';
import
浏览 12提问于2020-12-14得票数 0
2回答
我正试图使用react多日期选择器库中的DateObject对象-- 来保持react路由器的状态。但是，当我试图在导航后访问状态时，该对象将被清空。
let history = useHistory();
history.replace({pathname: "/", state: {date: new DateObject()});
history.push({pathname: "/another-path"});
let history = useHistory();
history.goBack();
let location = useLocatio
浏览 2提问于2021-06-24得票数 2
我正在使用新的useHistory钩子反应路由器，这是几个星期前出来的。我的反应路由器版本是5.1.2.我的反应是16.10.1版。你可以在底部找到我的密码。
然而，当我从react路由器导入新的useHistory时，我会得到以下错误：
Uncaught TypeError: Cannot read property 'history' of undefined
它是由反应性路由器中的这一行引起的。
function useHistory() {
if (process.env.NODE_ENV !== "production") {
!(type
浏览 8提问于2019-10-03得票数 56
回答已采纳
我正在尝试从‘react- useHistory -dom’导入路由器，但是，我得到这个错误:导入错误：'useHistory‘不是从'react-router-dom’导出的。
我也检查了其他答案，比如 this，但都没有用。我的package.json看起来像这样
我就是这样使用useHistory的，
import React from 'react';
import { useState, useEffect } from 'react';
import { useHistory } from 'react-router
浏览 81提问于2021-09-19得票数 4
如何正确使用useHistory()？我不能从一个反应组件过渡到另一个反应组件。根据React文档的说明以及堆栈溢出的说明，我不能从App.js转换到MyComponent.js。
举个例子-我在努力
/* **App.js ** */
/* Import modules */
import React from 'react';
import { useHistory } from 'react-router-dom'; // version 5.2.0
function App()
{
let history = useHistory ();
浏览 3提问于2020-11-14得票数 25
回答已采纳
我有这个功能部件。
import { useHistory } from "react-router-dom";
function ProfileForm(props) {
const form = useForm();
const {
register,
handleSubmit,
errors
} = form;
const history = useHistory(); // TypeError: Cannot read property 'history' of undefined
......
}
为什么会有这个错误？顺便说一句，我安装
浏览 1提问于2020-03-11得票数 2
回答已采纳
我的目标是在成功响应后将登录重定向到仪表板。然而，我得到了
错误:无效钩子调用。钩子只能在函数组件的主体内调用。这种情况的发生有以下原因之一：
我已经从导入了useHistory，但是不能在LoginPage的主体中初始化它。我想要实现的就是重定向到仪表板页面。
Login.js
import React, { Component } from 'react';
import { useHistory } from "react-router-dom";
export class Login extends Component {
stati
浏览 0提问于2021-08-04得票数 2
我有SignupForm组件。它是功能组件。但是我需要将这个组件重做为类组件。
我知道类组件必须有：
如下所示的class SignupForm extends React.Component 行
render() 方法
在我的例子中，是state而不是state
在我的case方法中，代替了setState
但我还有：
const history = useHistory();
history.push("/home");中的onSubmit方法
const {handleSubmit, values, handleChange, errors, handleBlur, is
浏览 0提问于2020-04-15得票数 0
回答已采纳
1回答
使用useEffect return删除addEventListener时出现问题我还尝试将空数组作为第二个参数添加到useEffect，但侦听器仍然存在 import React, { useCallback, useEffect } from "react";
import headerLogo from "./icons/logo.svg";
import { useHistory } from "react-router-dom";
function Home({ header }) {
const history = useHi
浏览 33提问于2021-08-04得票数 0
所以我在react-router-dom中使用redirect，我有两个页面，home和create当create中的表单完成并提交后，它将执行<Redirect>函数，它可以工作，但ComponentDidMount没有再次触发，我需要重新加载页面以使ComponentDidMount重新启动，这是我的代码 下面是我在Create文件中使用redirect的方法： if(this.state.createNew){
return <Redirect to='/home'/>
} 这是我的Home文件中的ComponentDid
浏览 126提问于2020-06-10得票数 0
我正在尝试使用react设置验证帐户，并在我的App.js文件中有以下内容
App.js
import SigninPage from './pages/signin';
import ResetPasswordPage from './pages/resetPassword'
import VerifyAccountPage from './pages/verifyAccount'
...
...
import { useHistory } from 'react-router';
import { logout } f
浏览 5提问于2021-06-19得票数 4
回答已采纳
我试图做一些非常简单的反应应用程序。我想要一个“后退”按钮将用户带到上一个页面，除非用户已经从特定的页面到达，在这种情况下，“返回”将把用户路由到另一个页面--类似于：
const navigate = useNavigate();
if (lastPage === XYZ) {
navigate('/home');
} else {
navigate(-1);
}
我的问题是，我无法解决如何在react router v6 ( useHistory已被分解)中获得useHistory。谢谢!
浏览 5提问于2022-04-18得票数 1
回答已采纳
1回答
我正在做React中的一个项目，我被重定向页面卡住了。基本上，当我按下按钮时，我应该进入另一个页面，但由于某些原因，它不工作，我得到了这个错误TypeError:无法读取属性‘推’的未定义。这是我的代码。
import React from 'react';
import "./TaskBar.css";
import { useHistory } from 'react-router-dom';
function TaskBar () {
const history = useHistory();
const navigate
浏览 2提问于2020-08-28得票数 0
我使用的历史从反应路由器-多玛v5这工作在主页上，在内部页的历史推送不起作用。
浏览器中的URL正在更新，但组件或页面将被刷新
ListComponent.js
import { useHistory } from "react-router-dom";
export const ListComponent () => {
const history = useHistory();
const handleClick = () => {
history.push("/list/view-all");
}
浏览 3提问于2022-01-21得票数 -1
作为练习，我正在制作一个react应用程序(仍在学习React)，它实现了一个使用firebase的登录系统。当然，要实现这样的功能，react路由器是必要的，我已经成功地实现了它。然而，一旦用户登录，他应该能够看到一个侧边栏，以及其他动态更改的内容。现在，我需要再次使用react路由器在用户单击侧边栏中的特定项目时更改这些页面，而不必呈现每个组件的侧边栏。我已经阅读了嵌套路由器的文档，但就是不能让它工作。任何帮助都是非常感谢的。 代码如下： App.js： import "./App.css";
import LoginForm from "./components
浏览 41提问于2021-09-17得票数 0
回答已采纳
我在页面上有一些过滤器。一旦我点击后退，我想一个一个地回到过滤的页面。
就像我在页面上，我有3个过滤器在上面。我应用了filter 1，然后应用了filter 2。一旦我单击back，我应该转到filter1页面，然后是主页。但这是行不通的。一旦我点击后面，它就会显示
Uncaught :无法读取未定义的属性“go”
import { useHistory } from 'react-router-dom';
const backBtn = ({ href }) => {
const history = useHistory();
function handl
浏览 0提问于2021-07-05得票数 0
我现在使用的是React@v17.0.2和react-router-dom@v5.2.0。
我知道我能做到
import { useHistory } from 'react-router-dom'
function SomeComp (){
const history = useHistory()
function handleSomeEvent() {
history.push('....')
}
return <.../>
}
但是在发送http请求时，可能会出现类似not login或session expired
浏览 3提问于2021-05-14得票数 1
回答已采纳
1回答
一时兴起..。
我写下了以下代码
import React, { useRef } from 'react';
import { useHistory } from 'react-router-dom';
// Parent component
const Example: React.FC = () => {
// Case A:
const packHistoryToRef = useRef<ReturnType<typeof useHistory>>(useHistory());
// Case B:
co
浏览 3提问于2021-11-08得票数 1
回答已采纳
在带有父元素和子元素的React应用程序中，我希望在导航到/Parent/Child时实现以下目标
我希望在新页面上呈现Child。
我希望避免在/Parent/Child (最上面的文件)中为index.js定义路由。
当前，在下面的代码()中，当导航到/Parent/Child时，会呈现父级和子级，从而破坏了需求#1。原因是<Route path='/Parent' component={Parent} />没有exact属性。
但是，使它成为<Route exact path='/Parent' component={Pa
浏览 2提问于2021-01-01得票数 2
回答已采纳
我在React.I中工作，我已经创建了一个按钮，它可以在单击时将用户引导到页面，我还制作了一个组件并导入了它。我创建了一个函数routeChange，当单击按钮时，它将直接指向一个新页面，而不是指向任何页面。
相反，我得到了一个错误。
可能文件夹没有任何错误。
我将我的About组件导入为：
import React from 'react';
import {Navbar,NavbarBrand, Jumbotron, Button} from 'reactstrap';
import './App.css';
import Descripti
浏览 1提问于2020-08-27得票数 0
回答已采纳
我试图使用"useHistory“钩子从‘react路由器-dom’，我遇到了一个错误，'TypeError:无法读取属性的未定义(读取‘推送’)。下面是我的密码。
import './App.css';
import { React, useState } from 'react'
import Header from './Header';
import Register from './Register';
import Login from './Login';
import { Brows
浏览 1提问于2021-10-16得票数 1
2回答
为什么我们需要在每个组件中一次又一次地使用历史来导航我们的应用程序？
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
function handleClick() {
history.push("/home");
}
return (
<button type="button" onClick={handleClick}>
Go home
浏览 0提问于2021-10-02得票数 0
2回答
我正在做一个谷歌克隆(迷你项目)，为此，我需要从react-router-dom导入react-router-dom。
我遵循以下步骤：
步骤1：npm install --save react-router-dom (我在终端中使用了此命令)步骤2：import { useHistory } from "react-router-dom" (在文件顶部使用此命令)步骤3：const history = useHistory() (在代码中使用此命令)
在执行以下步骤后，我将得到以下错误：
出口'useHistory‘(作为’useHistory‘进口)在’react路
浏览 11提问于2022-10-27得票数 3
回答已采纳
当主页按钮被按下时，我想将它重定向到主页'/‘。但是我得到了这个错误。我能做些什么？： import { Route, useHistory } from 'react-router-dom/cjs/react-router-dom.min';
const history = useHistory();
const homeButtonOnClickHandler = () =>{
history.push("/");
}
<Router>
<Header homeButtonOnClickHandler
浏览 28提问于2020-11-06得票数 2
回答已采纳
我在两个组件上使用useHistory和useLocation。当使用字符串传递history.push上的数据时，"test“状态将是"test”。但是，如果我通过了“测试”状态，就会变得没有定义。而且，useEffect运行了两次，我不明白为什么。我让它指向搜索。
第一组件
import React, { useState, useEffect } from "react";
import { useHistory } from "react-router-dom";
const history = useHistory();
co
浏览 6提问于2022-11-17得票数 0
1回答
当我使用history.push函数时，它总是返回这个错误
TypeError:历史是未定义的
import React from 'react';
import { useHistory } from 'react-router-dom';
function App() {
let history = useHistory();
function testing() {
history.push("/whatever");
}
return (
<div className="App"
浏览 0提问于2021-09-03得票数 0
回答已采纳
如何在有状态组件(类组件)中使用react路由器5.1.2中的history.push('path')？ 我找到了这个，但它是无状态组件的解决方案。 import { useHistory } from "react-router-dom";
function App() {
let history = useHistory();
}
浏览 65提问于2019-12-19得票数 14
回答已采纳
我在一个单独的js文件中有一个函数，它检查从Api请求接收到的状态代码，并根据该函数执行一些操作所需的代码：
function handleResponseCodes(res) {
try {
if (res.status ===200 ) {
return res.json();
} else if (res.status === 404) {
// here I need to redirect to /help
} else if (!res.ok) {
ale
浏览 7提问于2021-05-22得票数 2
在React admin中，我正在实现动态资源这个文件作为对象返回我的资源，
在此组件中，出现错误和未定义的路由器-dom钩子。
import React from "react";
import { useLocation, useHistory } from "react-router-dom";
import RoomList from "../components/Room";
const AdminResources = () => {
const [resourceToBeLoaded, setResourceToBeLo
浏览 3提问于2021-11-16得票数 0
我正在构建一个React应用程序，我不希望浏览器中的URL被更新。我不是使用‘react路由器-dom’，而是只使用‘react路由器’和MemoryRouter ()。history.push()可以直接在组件语句中使用，但我希望将历史传递给这些主要组件的子组件，但是属性没有定义。
以下是主App.js中的路由器部分(components Home和ScreeningTool可以按预期访问this.props.history.push() )：
...
import {Route, MemoryRouter} from "react-router";
...
<Memo
浏览 3提问于2020-04-04得票数 3
回答已采纳
我有一个代码片段，看起来有点像这样：
// SomeFile.js
import { useHistory } from "react-router-dom";
/*
Cannot put it here either
const history = useHistory();
*/
export const SomeFile = () => {
console.log("something?");
handlers.SWITCH_PAGE();
};
const handlers = {
SWITCH_PAGE: () => {
浏览 1提问于2022-06-07得票数 -2
我想要重定向到表单提交的另一个页面。
我已经阅读和看到了几篇文章，建议使用：
this.props.history.push("/")
以及使用的建议：
import { useHistory } from 'react-router-dom';
//Followed by
let history = useHistory();
history.push("/");
然而，这两种方法对我都不起作用：
this.props.history.push("/")
生成以下错误：
Uncaught (in promise) TypeEr
浏览 5提问于2021-09-01得票数 0
我有一个用户页面，其中我将一个单独的用户obj传递给一个用户/:id页面的单独的用户组件。
{users.map((user) => (
<Link
to={{
pathname: `users/${user.id}`,
state: { user }
}}
>
然后在用户组件中引用user.id，如下所示
import { useLocation, useHistory } from "react-router-dom";
im
浏览 3提问于2021-09-20得票数 1
回答已采纳
在下面的示例中，我使用history重定向了一些链接。 const history = useHistory()
useEffect(() => {
history.push(`/my/link`)
}, []) 然后react报告缺少依赖项history。我不明白为什么history会成为这里的依赖项。它不是state变量，也不是来自props的变量。如果我将history添加到依赖数组中，是否会导致对useEffect的无限调用。因为当发生history.push(/my/link)时，history会改变。 const history = useHistory()
useEf
浏览 33提问于2021-09-23得票数 2
回答已采纳
我正在尝试使用react-router-dom实现一个返回按钮。按钮工作得很好，但我的问题是根据最后访问的页面更改其标签。此按钮将仅出现在可从两个不同页面访问的一个特定组件中。
import { useHistory } from "react-router-dom";
export const GoBack = ({ label }) => {
const history = useHistory();
return (
<div>
<button onClick={() => history.goBack()}&g
浏览 4提问于2020-01-07得票数 1
我对反应和尝试理解组件在项目中使用的功能非常陌生。
我以前使用过react路由器的useHistory，但这看起来很不一样。而且似乎道具也被使用了。这里有没有人能理解和解释这个组件的作用。withRouter做了什么，如果它和useHistory相同呢？
谢谢!
import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'
const LinkButton = (props) => {
con
浏览 3提问于2020-02-24得票数 0
回答已采纳
我刚刚尝试在浏览器上构建react-router docs ex，但是AuthButton组件有问题，当isAuthenticated变为true时，它不显示signOut按钮
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Link,
Redirect,
useHistory,
useLocation,
} from 'react-router-dom';
export default funct
浏览 22提问于2020-05-14得票数 1
回答已采纳
2回答
import React, { Component, Fragment, useEffect, useState } from "react";
import Select from "react-select";
import { useHistory } from "react-router-dom";
const options = [
{ value: "red", label: "red" },
{ value: "blue", label: "blue" }
浏览 30提问于2021-07-24得票数 2
回答已采纳
我已经做了一个类来管理关于json令牌的所有事情，它可以工作，直到我更新了所有包。现在，我得到以下错误：
React Hook "useHistory" cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks
下面是这个类的代码：
import jwt_decode from "jwt-decode";
imp
浏览 14提问于2021-07-31得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
