上述错误发生在 <BrowserRouter> 组件中，Invalid hook call

Question

我正在尝试使用a react-router，在使用该库后开始出现一些问题，我已经尝试编写不同的代码，我在互联网上找到了现成的代码，但仍然出现问题（甚至重置Windows）。这段代码取自官方的react-router文档，按照所写的进行了所有操作（https://reactrouter.com/docs/en/v6/getting-started/installation），这是错误：

警告：无效的挂钩调用。钩子只能在函数组件的主体内部调用。>出现这种情况可能是由于以下原因之一：

1. 您的 React 和渲染器版本可能不匹配（例如 React DOM）
2. 你可能违反了 Hooks 规则
3. 您可能在同一个应用程序中拥有多个 React 副本，请参阅https://reactjs.org/link/invalid-hook-call了解有关如何调试和解决此问题的提示。printWarning@react.development.js:207

未捕获的类型错误：无法读取 null 的属性（读取“useRef”）

在 useRef (react.development.js:1628:1)

在 BrowserRouter (index.tsx:151:1)

在 renderWithHooks (react-dom.development.js:16175:1)

在 mountInminatedComponent (react-dom.development.js:20913:1)

在开始工作（react-dom.development.js：22416：1）

在 HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)

在 Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)

在 invokeGuardedCallback (react-dom.development.js:4274:1)

在 beginWork$1 (react-dom.development.js:27405:1)

在 PerformUnitOfWork (react-dom.development.js:26513:1)

组件中出现上述错误：

在 BrowserRouter (http://localhost:3001/static/js/bundle.js:45400:5)

考虑向树添加错误边界以自​​定义错误处理行为。访问https://reactjs.org/link/error-boundaries了解有关错误边界的更多信息。logCapturedError @react-dom.development.js:18572

4 个错误invalid hooks、 3 个错误 和Uncaught TypeError: Cannot read properties of null (reading 'useRef')出现The above error occurred in the <BrowserRouter> component在控制台一次

这是我的代码：

src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
  <BrowserRouter>
    <App />
  </BrowserRouter>
  </React.StrictMode>
);

src./App.js

import React from "react";
import ReactDOM from "react-dom";
import {Routes,Route, Link } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <h1>Welcome to React Router!</h1>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
      </Routes>
    </div>
  );
}

function Home() {
  return (
    <>
      <main>
        <h2>Welcome to the homepage!</h2>
        <p>You can do this, I believe in you.</p>
      </main>
      <nav>
        <Link to="/about">About</Link>
      </nav>
    </>
  );
}

function About() {
  return (
    <>
      <main>
        <h2>Who are we?</h2>
        <p>
          That feels like an existential question, don't you
          think?
        </p>
      </main>
      <nav>
        <Link to="/">Home</Link>
      </nav>
    </>
  );
}
export default App;

和package.json

{
  "name": "ao-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test", 
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

我按照文档中所写的那样做了所有事情（https://reactrouter.com/docs/en/v6/getting-started/installation）

Answer 1

问题是我没有将库下载到项目本身，而是下载到项目文件夹，这就是为什么我在项目内部和项目文件夹本身中有package.json，其中安装了react-router，也就是说，在下载库之前我忘记通过 cd 进入项目本身

Answer 2

我面临着同样的问题。只需卸载react-router-dom版本6并安装即可

npm i react-router-dom

这对我有用！