在最新React版本中添加React Router DOM和导航栏后出现无效Hook调用错误

我正在开发一个带导航栏和React Router DOM的Todo List应用，添加导航栏和React Router DOM前一切正常，现在出现如下错误：

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

我已导入所有最新组件，并对齐了React和React Router DOM的版本，以下是相关代码：

App.js #

import logo from './logo.svg';
import './App.css';
import Navibar from './components/Navibar';
import { useState } from 'react';
import TodoTask from './components/TodoTask';
import { Route, Routes, BrowserRouter } from 'react-router-dom';
import Footer from './components/Footer';
import AboutUs from './components/AboutUs';
import ContactUs from './components/ContactUs'

function App() {
  return (
    <BrowserRouter>
      <div>
        <Navibar />
        <Routes>
          <Route exact path="/" element={<TodoTask />} />
          <Route path="/aboutus" element={<AboutUs />} />
          <Route path="/contactus" element={<ContactUs />} />
        </Routes>
        <Footer />
      </div>
    </BrowserRouter>
  );
}

export default App;

AboutUs.js #

import React from 'react';

const AboutUs = () => {
  return (
    <div>
      This is footer
    </div>
  )
}

export default AboutUs;

ContactUs.js #

import React from 'react';

const ContactUs = () => {
  return (
    <div>
      This is footer
    </div>
  )
}

export default ContactUs;

Navibar.js #

import React from 'react';
import { Link } from "react-router-dom";

const Navibar = () => {
  console.log("Load navigation bar")
  return (
    <div>
      <nav className="navbar navbar-expand-lg bg-light">
        <div className="container-fluid">
          <Link className="navbar-brand" to="#">navbar</Link>
          <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav me-auto mb-2 mb-lg-0">
              <li className="nav-item">
                <Link exact className="nav-link active" aria-current="page" to="/">Welcome</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link active" aria-current="page" to="/aboutus">About Us</Link>
              </li>
              <li className="nav-item">
                <Link className="nav-link" to="/contactus">Contact Us</Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  )
}

export default Navibar;

Package.json #

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.7.1",
    "react-scripts": "5.0.1",
    "router-dom": "^2.2.10",
    "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"
    ]
  }
}

请问我该如何解决这个错误？

核心问题是你安装了错误的路由包：你当前依赖里的router-dom是一个非官方的旧包，并非React官方的路由库react-router-dom，这会导致模块引入异常，触发无效Hook调用警告。

解决步骤：

1. 卸载错误的包：

npm uninstall router-dom

2. 安装官方的React Router DOM包：

npm install react-router-dom

3. 重启你的开发服务器

完成以上操作后，错误应该会消失。你的代码其他部分没有违反Hook规则，React与React DOM版本也匹配，所以问题根源就是这个错误的依赖包。

内容的提问来源于stack exchange，提问作者degr8sid