Блог

Мой Navbar.js является

 import { AppBar, makeStyles, Toolbar, Typography } from "@material-ui/core";  const useStyle = makeStyles({  header: {  background: '#111111'  } })   const Navbar = () =gt; {  const classes = useStyle();  return (  lt;AppBar className={classes.header }position="static"gt;  lt;Toolbargt;   lt;Typography component="h2"gt;Code for interviewlt;/Typographygt;  lt;Typography component="h2"gt;All Userslt;/Typographygt;  lt;Typography component="h2"gt;Add    Userlt;/Typographygt;  lt;/Toolbargt;  lt;/AppBargt;  );  };    export default Navbar;  

Мой App.js является

 import Navbar from "./components/Navbar"; import CodeForInterview from "./components/CodeForInterview"; import AllUsers from "./components/AllUsers"; import AddUsers from "./components/AddUsers"; import {BrowserRouter, Route, Routes} from 'react-router-dom'; import { render } from "@testing-library/react"; function App() {  return (  lt;BrowserRoutergt;    lt;Navbar/gt;  lt;Routesgt;  lt;Route path ="/" element = {lt;CodeForInterview/gt;}/gt;  lt;Route path ="/all" element = {lt;AllUsers/gt;}/gt;  lt;Route path ="/add" element = {lt;AddUsers/gt;}/gt;  lt;/Routesgt;    lt;/BrowserRoutergt;  ); }  export default App;  

Я получаю ошибку :

Ошибка: Неверный вызов соединения. Крючки могут вызываться только внутри тела функционального компонента. Это может произойти по одной из следующих причин:

1. У вас могут быть несовпадающие версии React и средства визуализации (например, React DOM).
2. Возможно, вы нарушаете Правила Крючков
3. У вас может быть более одной копии React в одном приложении