React-router - 挂钩 useHistory 错误：无法读取未定义的属性“历史”

Question

I'm trying to use the hook useHistory fromdocumentation of react-router-dom .

I keep getting this error: TypeError: Cannot read property 'history' of undefined

Here an example: https://codesandbox.io/s/twilight-meadow-bwnt8?fontsize=14&hidenavigation=1&theme=dark

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


function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

function App() {
  return (
     <HomeButton />
  );
}

export default App;

Answer 1

The useHistory hook only works inside of a Route.

It is the route that passes the history object to the useHistory hook. Which is why in this case it is undefined - there is no route to pass the history object to it.