在最新 React 版本中添加 React Router DOM 和 Navbar 的无效挂钩调用

Question

我正在创建一个带有导航栏和 React Router DOM 的待办事项列表应用程序。 在我添加导航栏和 React Router DOM 之前一切正常。 现在，我收到此错误：

警告：无效挂机调用。 钩子只能在 function 组件的内部调用。 这可能由于以下原因之一而发生：

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

我已经导入了所有最新的组件，并调整了 React 和 React Router DOM 的版本。

每个文件的代码如下：

应用程序.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;

关于我们.js

import React from 'react';

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

export default AboutUs;

联系我们.js

import React from 'react';

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

export default ContactUs;

导航栏.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"
    ]
  }
}

有人可以建议我应该怎么做才能摆脱这个错误？

Answer 1

我看到的唯一差异是react-router-dom作为项目依赖项缺失。 应该加上。

终止所有正在运行的应用程序实例，并从终端中项目的根目录运行命令以安装依赖项并重新启动应用程序。

npm install -S react-router-dom@6

npm start

此外，我不知道router-dom是什么，这似乎是一个错误。 如果是这样，则将其删除并重新启动。

npm uninstall -S router-dom