<BrowserRouter> 组件出现上述错误，Invalid hook call答案

【问题标题】：The above error occurred in the <BrowserRouter> component, Invalid hook call<BrowserRouter> 组件出现上述错误，Invalid hook call
【发布时间】：2022-06-29 13:56:57
【问题描述】：

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

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

您的 React 和渲染器版本可能不匹配（例如 React DOM）

您可能违反了 Hooks 规则

您可能在同一个应用程序中拥有多个 React 副本有关如何调试和修复此问题的提示，请参阅 https://reactjs.org/link/invalid-hook-call。 printWarning@react.development.js:207

未捕获的 TypeError：无法读取 null 的属性（正在读取 'useRef'）

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

在 BrowserRouter (index.tsx:151:1)

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

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

在 beginWork (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

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

这是我的代码：

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)

【问题讨论】：

那是create-react-app的真的旧版本。尝试使用 v4 或更新版本。您是否使用npx 运行创建应用命令，即npx create-react-app <your app name here>？
代码工作正常，请尝试更新您的依赖项。
@DrewReese，在此之前，我也是通过npx create-react-app（旧版本）形成应用的。我下载了create-react-app的第5版，即使重新创建了它，它仍然不起作用，会不会因为我没有使用webpack而出现错误？忘了说无效钩子调用的错误出现在控制台4次，Uncaught TypeError: Cannot read properties of null (reading 'useRef') 3次和上述错误发生在组件一次
我很确定 create-react-app 不应该作为项目依赖项安装。它甚至不应该安装在 npm 本地。您是否在我们可以检查和运行的公共存储库中提供此代码，或者您可以尝试创建一个 running 代码和框演示来重现我们可以实时检查和调试的这个问题？
@DrewReese，一切都在代码盒中工作，我编写的代码与我的项目中完全相同。我完全不明白出了什么问题，也许我以某种方式安装了错误的软件包？这是codesandbox的链接：codesandbox.io/s/hungry-parm-kv3d87?file=/src/App.js创建了一个这样的项目：（我在VScode中工作）1）创建了一个文件夹2）通过终端（内置于VScode）我开了npm i create-react-app@5 3） npm i react 4) npm i react-dom 5) npm i react-router 6) npm i react-router-dom 7) 接下来，我使用 npx create-react-app 创建一个 React 应用程序并编写代码

标签： reactjs react-hooks react-router

【解决方案1】：

我遇到了同样的问题。只需卸载react-router-dom的版本6并安装它就像

npm i react-router-dom

这对我有用！

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

我测试了以上所有内容，但以下内容对我有用：

npm install --save react-router-dom@latest

【讨论】：