javascript - BrowserRouter 导致无效的钩子(Hook)调用。 Hooks 只能在函数组件的主体内部调用

Question

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

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:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

这是说我的 浏览器路由器 这个问题似乎表明 React 和渲染器不匹配。但是，我找不到任何问题。下面是导致错误的一段代码:

import React from 'react';
import './App.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from "./pages/Home";

function App() {
  return (
    <div>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={Home}/>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

做一个 npm ls react 产生以下结果:

├─┬ react-bootstrap@2.0.4
│ ├─┬ @restart/hooks@0.4.5
│ │ └── react@17.0.2 deduped
│ ├─┬ @restart/ui@0.2.5
│ │ ├─┬ @react-aria/ssr@3.1.0
│ │ │ └── react@17.0.2 deduped
│ │ └── react@17.0.2 deduped
│ ├─┬ prop-types-extra@1.1.1
│ │ └── react@17.0.2 deduped
│ ├─┬ react-dom@17.0.2
│ │ └── react@17.0.2 deduped
│ ├─┬ react-transition-group@4.4.2
│ │ └── react@17.0.2 deduped
│ ├── react@17.0.2
│ └─┬ uncontrollable@7.2.1
│   └── react@17.0.2 deduped
├─┬ react-router-dom@6.2.1 extraneous
│ └── react@17.0.2 deduped
└─┬ react-router@6.2.1 extraneous
  └── react@17.0.2 deduped

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

Answer 1

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