React-Router:为什么在 react 中未定义 useHistory?

Question

我有这个。 它与文档中所说的完全相同。 我认为 react-router-dom 模块很好，因为在其他组件中，浏览器路由器、路由器和链接对我有用

import { useHistory } from "react-router-dom"
import React from 'react'
export default function HomeButton() {
let history = useHistory()
function handleClick() {
history.push("/home")
}
return (
<button type="button" onClick={handleClick}>
Go home
</button>
);
}

当我单击按钮时，会发生这种情况

类型错误：无法读取未定义的属性"推送">

我是 reactjs 的新手，请帮忙，谢谢

Answer 1

您将路由器添加到 DOM 中，并在您使用 useHistory 的同一组件中<Router>...</Router>。

useHistory 仅适用于子组件，但不适用于父组件或组件本身。

您必须将组件的<Router>...</Router>包装向上移动一级。您可以在应用程序中执行此操作.js：

应用.js

import { BrowserRouter as Router } from 'react-router-dom'; 
function App() {
return (
<Router>
<div className="App">
</div>
</Router>
);
}
export default App;

组件.js

import React from'react';
import {useHistory, withRouter } from "react-router-dom";

export default function HomeButton() {
let history = useHistory()
function handleClick() {
history.push("/home")
}
return (
<button type="button" onClick={handleClick}>
Go home
</button>
);
}
export default withRouter(HomeButton);

这对我有用。