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

Question

如何useHistory()正确使用？我无法从一个反应组件过渡到另一个反应组件。根据 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>
    );
}

我也测试了这个示例，但是按下按钮时输出会引发以下错误：

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

是不是有什么东西泄露给了我，或者 Babel 这边有什么错误？

项目反应结构：

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

Answer 1

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

代替：

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

我们现在使用：

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

Answer 2

您不能只使用useHistory挂钩来重定向到另一个页面。您需要正确设置您的应用程序才能使用 React Router。从这里开始查看他们的示例https://reactrouter.com/web/example/basic

您需要包装整个应用程序，以便<BrowserRouter />通过钩子提供您正在查找的历史对象。

顺便说一句，您不提供history.push的相对文件路径作为参数，您必须提供通常使用<Route />组件设置的有效路由

Answer 3

使用 React 17.0>，这对我有用：

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

const history = useHistory();
history.push("/home");

我已经找到了 useHistory 函数的正确用法。尝试回答此帖子以获取反馈。