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

Question

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

Warning: 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:

You might have mismatching versions of React and the renderer (such as React DOM)

You might be breaking the Rules of Hooks

You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. printWarning @ react.development.js:207

Uncaught TypeError: Cannot read properties of null (reading 'useRef')

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

at BrowserRouter (index.tsx:151:1)

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

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

at beginWork (react-dom.development.js:22416:1)

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

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

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

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

at performUnitOfWork (react-dom.development.js:26513:1)

The above error occurred in the component:

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

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. logCapturedError @ react-dom.development.js:18572

4 个 invalid hooks 的错误，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)

Answer 1

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

转到项目本身

Answer 2

我遇到了同样的问题。直接卸载react-router-dom的版本6，然后像

一样安装

npm i react-router-dom

这对我有用！

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

The above error occurred in the <BrowserRouter> component, Invalid hook call

reactjs

react-router

react-hooks