我正在尝试使用 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:

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 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$1 (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 ，3 个错误带有 Uncaught TypeError: Cannot read properties of null (reading 'useRef') 和 The above error occurred in the <BrowserRouter>组件 出现在控制台中一次

这是我的代码：

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 ）