BrowserRouter 导致无效的挂钩调用。钩子只能在函数组件体内调用

Question

使用react-router-dom版本6时出现以下错误：

\n

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\n

\n

据说我的BrowserRouter是问题，这似乎表明 React 和渲染器不匹配。但是，我找不到任何问题。下面是导致错误的代码片段：

\n

import React from 'react';\nimport './App.css';\nimport { BrowserRouter, Route, Routes } from 'react-router-dom';\nimport Home from "./pages/Home";\n\nfunction App() {\n  return (\n    <div>\n      <BrowserRouter>\n        <Routes>\n          <Route path="/" element={Home}/>\n        </Routes>\n      </BrowserRouter>\n    </div>\n  );\n}\n\nexport default App;\n

\n

执行npm ls React会产生以下结果：

\n

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\xac react-bootstrap@2.0.4\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\xac @restart/hooks@0.4.5\n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 react@17.0.2 deduped\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\xac @restart/ui@0.2.5\n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\xac @react-aria/ssr@3.1.0\n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 react@17.0.2 deduped\n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 react@17.0.2 deduped\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\xac prop-types-extra@1.1.1\n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 react@17.0.2 deduped\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\xac react-dom@17.0.2\n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 react@17.0.2 deduped\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\xac react-transition-group@4.4.2\n\xe2\x94\x82 \xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 react@17.0.2 deduped\n\xe2\x94\x82 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 react@17.0.2\n\xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\xac uncontrollable@7.2.1\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 react@17.0.2 deduped\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\xac react-router-dom@6.2.1 extraneous\n\xe2\x94\x82 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 react@17.0.2 deduped\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\xac react-router@6.2.1 extraneous\n  \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 react@17.0.2 deduped\n

\n

我被这个阻止了，任何帮助将不胜感激！谢谢！

\n

Answer 1

我发现问题了！我有两个 package.json 文件 - 一个在我的 React 应用程序中，一个在它之外。我的react-router-dom安装在错误的package.json中。将其安装在react-app本身中解决了这个问题。