javascript - 如何正确使用 react-router-dom 中的 useHistory()？

Question

使用方法useHistory()正确吗？我无法从一个 react 组件过渡到另一个。
根据 React 文档和 Stack Overflow 上的说明，我无法从 App.js 过渡到 MyComponent.js。
例如 - 我正在尝试

/* **App.js ** */
/* Import modules */
import React from 'react';
import { useHistory } from 'react-router-dom'; // version 5.2.0

function App()
{
    let history = useHistory ();
    const handleClick = () => {
       history.push ('./pages/MyComponent');
    }    

    return (
       <div className="App">
          <button onClick={handleClick}>Next page ==></button>
       </div>
    );
}

我也测试了这个例子，但是按下按钮时输出会抛出以下错误:

TypeError: Cannot read property 'push' of undefined

是不是有什么东西泄露给我了，还是巴别塔那边出了什么问题？
项目 react 结构:

+ Root/
    + src/
        - App.js
        - index.js
        + pages/
            - MyComponent.js
    

Answer 1

这在 v6 中发生了变化，useHistory 现在是 useNavigate，我们可以按如下方式使用它:
代替:

const history = useHistory()
history.push('/')

我们现在使用:

const navigate = useNavigate()
navigate('/')