自关闭一个组件后出现无效的钩子调用错误

Posted 2023-02-21

【中文标题】自关闭一个组件后出现无效的钩子调用错误

【英文标题】：invalid hook call error after selfclosing one component

【发布时间】：2021-06-09 06:50:03

【问题描述】：

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

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

./src/index.js/

5 |从'./reportWebVitals'导入reportWebVitals； 6 |进口 “../node_modules/bootstrap/dist/css/bootstrap.min.css”； 7 |进口 BrowserRouter as Router 来自 'react-router-dom';

8 | ReactDOM.render( 9 | 10 | 11 | ,

在 App.js 文件中包含导航组件后，无效的钩子调用错误如下是我的 app.js 文件代码

import React from "react";
import Home from "./components/Home";
import About from "./components/About";
import  Route, Switch  from "react-router-dom";
import Navigation from "./Navigation";
export default function App() 
  return (
    <div className="app">
      <Navigation />
      <Switch>
        <Route path="/about" component=About />
        <Route path="/" component=Home />
      </Switch>
    </div>
  );

删除导航组件后错误不在下面是 index.js 文件代码

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import  BrowserRouter as Router from 'react-router-dom';
ReactDOM.render(
  <Router>
    <App/>
  </Router>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: 
reportWebVitals();

导航.js

import  Navbar, Nav, Container  from 'react-bootstrap';
import React from 'react'

export default function Navigation() 
    return (
        <>
        <Navbar collapseOnSelect fixed="top" expand="sm" bg="dark" variant="dark">
            <Container>
            <Navbar.Toggle aria-controls="responsive-navbar-nav" />
            <Navbar.Collapse id="responsive-navbar-nav">
                <Nav>
                <Nav.Link href="/">Home</Nav.Link>
                <Nav.Link href="/about">About</Nav.Link>

                </Nav>
                </Navbar.Collapse>
            </Container>
        </Navbar>
        </>
    )

谁能帮我解决这个问题？

【参考方案1】：

在将 navigation.js 文件移动到 components 文件夹后，它正在工作，我认为这是 react 两个实例的原因