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

Posted 2023-02-21

【中文标题】如何正确使用 react-router-dom 中的 useHistory()？

【英文标题】：How to properly use useHistory () from react-router-dom?

【发布时间】：2021-02-26 12:06:42

【问题描述】：

如何正确使用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>
    );

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

TypeError: 无法读取未定义的属性“push”

是不是好像有什么东西泄露给我了，还是 Babel 那边出了什么问题？

项目反应结构：

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

【问题讨论】：

push 和括号之间是否有空格？

没有错。 （我尝试过这个）。 @BlackMath

【参考方案1】：

这在 v6 中有所改变，useHistory 现在是 useNavigate，我们可以按如下方式使用它：

代替：

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

我们现在使用：

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

【参考方案2】：

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

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

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

【参考方案3】：

使用history.replace('/<route-name>') 也可以。

【参考方案4】：

您需要将它与 react-router-dom 一起使用。设置您的路由器配置，然后将其推送到该路径。您可以通过查看文档来获取更多信息。

https://reactrouter.com/web/example/route-config

不要忘记设置您的开关组件和您的确切根路径。

【讨论】：

我们看不到他的路线。 app.js 通常包含该路由，并且有一条路由将您发送到第一个组件。似乎他正在尝试从第一个组件中获取历史记录而不设置任何路线。

我同意。他使用的是相对路径而不是绝对路径。

是的，他可以使用 withRouter，但如果你以正确的方式构建东西就没有任何问题

我更新了问题并添加了项目的树结构。 @TalOrlanczyk

【参考方案5】：

当你应用 history.push 时，那是你的路径名吗？ history.push('/pathname') 是我猜的过程。 你可以在这里看到：https://reactrouter.com/web/api/Hooks