如何正确使用REACT-ROUTER-DOM中的useHistory()？

How to properly use useHistory () from react-router-dom?(如何正确使用REACT-ROUTER-DOM中的useHistory()？)

问题描述

如何正确使用useHistory()？我无法实现从一个Reaction组件到另一个组件的转换。 根据Reaction文档中的说明以及这里的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：无法读取未定义的属性‘Push’

是不是有什么东西向我泄漏了，还是巴别尔这边有什么问题？

项目反应结构：

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

推荐答案

您不能只使用useHistory挂钩重定向到另一个页面。 您需要正确设置您的应用程序才能使用Reaction路由器。看看他们的例子，从这个https://reactrouter.com/web/example/basic

开始

您需要用<BrowserRouter />包装整个应用程序，这将提供您要通过挂钩查找的历史记录对象。

顺便说一句，您没有将文件路径作为参数提供给history.ush，您必须提供通常使用<Route />组件设置的有效路径

这篇关于如何正确使用REACT-ROUTER-DOM中的useHistory()？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！