React-Router：为啥react中未定义useHistory？ [复制]

Posted 2023-02-22

【中文标题】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)

【参考方案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);

这对我有用。