时间戳

首页 > 解决方案 > 使用 withRouter 的 React-Router + React Hooks

reactjs - 使用 withRouter 的 React-Router + React Hooks

问题描述

我开始在我的应用程序中使用 React 钩子，但似乎有一个又一个的障碍要弄清楚。我不确定这是因为学习曲线还是依赖项没有准备好使用这个新实现。任何状况之下..

在钩子之前，我们使用 HOC 连接到特定的 API，无论是 Redux、React-Router 等。就我而言，我想访问我的 React-Router 属性（历史、位置）。

通常它就像文件底部一样简单：

export default withRouter(SomeComponent);

但是现在有了钩子，我不确定如何访问这些数据。

我如何使用新的 React 钩子从 react-router 访问相同类型的数据？

标签： reactjsreact-router

解决方案

根据 Tim Moses 对另一个答案的评论，react-router 现在为此提供了挂钩。示例代码已从React Hooks 文档中提取：

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>
  );
}

推荐阅读