Question

App.js：

import React from 'react';
import { Router, Route } from 'react-router-dom';
import Display from './Components/Display';

export function App() {
  return (
    <Router>
      <Route path="/" component={Display} />
    </Router>
  );
}

Display.js

import React from 'react';
import { useLocation, useHistory } from 'react-router-dom';

function History() {
  let history = useHistory(); // error saying invalid hook call
  let location = useLocation();
  console.log(history);
  return <h2>Hello Display</h2>;
}

export default History;

我正面临使用这些钩子的无效钩子调用。

这是我的依赖项：

"dependencies": {
  "@testing-library/jest-dom": "^4.2.4",
  "@testing-library/react": "^9.3.2",
  "@testing-library/user-event": "^7.1.2",
  "axios": "^0.19.2",
  "react": "^16.13.1",
  "react-dom": "^16.13.1",
  "react-redux": "^7.2.0",
  "react-router": "^5.1.2",
  "react-scripts": "3.4.1",
  "redux": "^4.0.5"
}

Answer 1

您正在使用来自react-router-dom的Router组件，而未提供自定义历史记录对象。

您可以使用BrowserRouter或提供自定义历史记录道具

test -z "$stderr"

Display.js

$stderr

Answer 2

我将我的React版本降级到16.14.0，现在可以使用了。 react 17.0似乎被react-router-dom破坏了

Answer 3

在我的例子中，我使用的是 React Element 而不是 React Component，这就是 useHistory() 钩子抛出错误的原因。

Answer 4

我在从 React 16 升级到 React 17 时遇到了完全相同的问题。这是由“React 和渲染器（例如 React DOM）版本不匹配”引起的。我升级了所有依赖项并开始工作。以下依赖项列表对我有用。

"dependencies": {
  "@material-ui/core": "^4.9.10",
  "@material-ui/icons": "^4.9.1",
  "@material-ui/lab": "^4.0.0-alpha.50",
  "@testing-library/jest-dom": "^5.12.0",
  "@testing-library/react": "^11.2.6",
  "@testing-library/user-event": "^13.1.5",
  "formik": "^2.1.4",
  "loadjs": "^4.2.0",
  "lodash": "^4.17.15",
  "history": "^5.0.0",
  "prop-types": "^15.7.2",
  "pure-react-carousel": "^1.27.0",
  "react": "^17.0.2",
  "react-addons-css-transition-group": "^15.6.2",
  "react-dom": "^17.0.2",
  "react-render-html": "^0.6.0",
  "react-router-dom": "^5.2.0",
  "react-scripts": "^4.0.3",
  "web-vitals": "^1.0.1",
  "yup": "^0.28.3"
}

PS：我在多个 React 项目中使用了“纱线工作区”。每个都有不同的依赖关系列表。我不得不分离一个项目才能使其发挥作用并得出这个结论。

Answer 5

就我而言，我在事件处理程序中使用了 useHistory。

当我从事件处理程序中删除 let history = useHistory(); 行代码时，问题解决了。

关于如何在 ReactJs 中使用钩子有一些限制。

? 不要在类组件中调用 Hooks。

? 不要调用事件处理程序。

? 不要在传递给 useMemo、useReducer 或 useEffect 的函数中调用 Hook。

有关更多信息，您可以阅读此Invalid Hook Call Warning

使用useHistory，useLocation挂钩的无效挂钩调用

5 个答案: