React-Router：为什么react中未定义useHistory？ [复制]答案

【问题标题】：React-Router: Why is the useHistory undefined in react? [duplicate]React-Router：为什么react中未定义useHistory？ [复制]
【发布时间】：2020-10-18 05:13:36
【问题描述】：

我有这个。它与文档中所说的完全相同。我认为 react-router-dom 模块很好，因为在其他组件中 BrowserRouter、Router 和 Link 对我有用

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>
  );
}

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

TypeError: 无法读取未定义的属性“push”

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

【问题讨论】：

useHistory 无法在您拥有 Routes 的组件中工作，因为尚未设置 useHistory 所需的上下文。 useHistory 将适用于您在您中声明的任何子组件或组件，但不适用于的父组件或组件本身
这能回答你的问题吗？ Cannot read property 'history' of undefined (useHistory hook of React Router 5)

标签： reactjs react-hooks react-router-dom

【解决方案1】：

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

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

您必须将组件的 <Router>...</Router> 包装上移一层。您可以在 app.js 中执行此操作：

App.js



import { BrowserRouter as Router } from 'react-router-dom'; 

function App() {
  return (
    <Router>
      <div className="App">
      </div>
    </Router>
  );
}

export default App;

component.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);

这对我有用。

【讨论】：