reactjs - react 路由器 : Why is the useHistory undefined in react?

Question

这个问题在这里已经有了答案:





Cannot read property 'history' of undefined (useHistory hook of React Router 5)

(7 个回答)


9 个月前关闭。




我有这个。
它与文档中所说的完全相同。
我认为 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: Cannot read property 'push' of undefined

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

Answer 1

您正在使用 <Router>...</Router> 将路由器添加到 DOM在您使用 useHistory 的同一组件中。
useHistory 仅适用于子组件，但不适用于父组件或组件本身。
您必须移动 <Router>...</Router>将组件向上一层包裹。您可以在 app.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);

这对我有用。