如何处理React钩子和样式标签?

我从React开始，尝试用Python + Flask + React创建一个网站。所以我创建了一个Python + Flask后端和React前端，它工作了显示从后端到前端的项目

现在我找到了这个教程，在我的网页左侧创建一个导航栏

我尝试了它，直到22:24，在这个视频:YouTube教程，但我不知道为什么它在教程中工作，我收到相同代码的错误。你能帮我吗?

我的问题是，我在浏览器中收到这个消息:

未捕获错误:无效钩子调用。的内部只能调用钩子函数组件的主体。这可能发生在以下原因:

1. 你可能有不匹配的版本的React和渲染器(如React DOM)
2. 你可能违反了Hooks的规则
3. 你可能在同一个应用程序中有多个React副本

React 2
resolveDispatcher
useRef
BrowserRouter index.tsx:151
React 11
renderWithHooks
mountIndeterminateComponent
beginWork
callCallback
invokeGuardedCallbackDev
invokeGuardedCallback
beginWork$1
performUnitOfWork
workLoopSync
renderRootSync
performConcurrentWorkOnRoot
workLoop scheduler.development.js:266
flushWork scheduler.development.js:239
performWorkUntilDeadline scheduler.development.js:533 react.development.js:1465

Sidebar.jsx:

import React from 'react';
import styled from 'styled-components';
import * as FaIcons from 'react-icons/fa';
import * as AiIcons from 'react-icons/ai';
import {Link} from "react-router-dom";

const Nav = styled.div`   
background: #15171c;
height: 80px;
display: flex;
justify-content: flex-start;
align-items: center;
`;
const NavIcon = styled(Link)`    
margin-left: 2rem;
font-size: 2rem;
height: 80px;
display: flex;
justify-content: flex-start;
align-items: center;
`;
const Sidebar = () => {
return (
<>
<Nav>
<NavIcon to='#'>
<FaIcons.FaBars />
</NavIcon>
</Nav>
</>
);
};
export default Sidebar;

App.js:

import React, {useState, useEffect} from 'react';
import Sidebar from './components/Sidebar';
import './App.css';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

/**
* useState = received backend_data + rendering
* useEffect = fetch backend_API at first rendering
* */

function App() {

const [data, setData] = useState([]);

useEffect(() => {
fetch("http://localhost:5000/menu").then(
res => res.json()
).then(
data => {
setData(data)
console.log(data)
}
)
}, [])

return (
<div>
<Router>
<Sidebar />
</Router>


{(typeof data.menu === 'undefined') ? (
<p>Loading...</p>
):(
data.menu.map((menu, i) => (
<p key={i}>{menu}</p>
))
)}
</div>
)
}

export default App

Package.json:

{
"name": "react-frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.4.0",
"react-scripts": "5.0.1",
"styled-components": "^5.3.5"
},
"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"
]
}
}