React-Router：为什么在 React 中未定义 useHistory？

Question

我有这个。它与文档中所说的完全相同。我认为 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>
  );
}

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

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

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

Answer 1

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

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

这对我有用。