Question

我开始在我的应用程序中使用React钩子，但是似乎要克服一个障碍。我不确定这是由于学习曲线还是因为依赖关系不准备使用此新实现。无论如何。

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

>

通常，这样做就像在文件底部一样简单：

export default withRouter(SomeComponent);

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

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

Answer 1

根据蒂姆·摩西（Tim Moses）对另一个答案的评论，react-router现在对此具有钩子。示例代码已从React Hooks docs中提取：

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

Answer 2

到目前为止，react-router中没有useRouter钩子。

this issues中有一些解决方案。

最简单的方法是使用use-react-router npm软件包，然后在您的组件中可以：

import useReactRouter from 'use-react-router';

const YourComponent = () => {
  const { history, location, match } = useReactRouter();
  ...
};

使用withRouter的React-Router + React Hooks

2 个答案: