Не отображается страница React
В консоли появляется следующая ошибка:
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:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. react.development.js:209 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:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. react.development.js:209 Uncaught TypeError: dispatcher is null useRef React BrowserRouter index.tsx:794 React 10 performWorkUntilDeadline scheduler.development.js:45 react.development.js:1630 An error occurred in the component.
Consider adding an error boundary to your tree to customize error handling behavior. Visit https://react.dev/link/error-boundaries to learn more about error boundaries.
Код App.jsx:
import "./App.css";
import AppRouter from "./router/AppRouter";
import { useState, useEffect } from "react";
import axios from "axios";
function App() {
const [posts, setPosts] = useState([]);
useEffect(() => {
const fetchPosts = async () => {
try {
const response = await axios.get(
"https://jsonplaceholder.typicode.com/posts"
);
console.log(response.data);
setPosts(response.data);
} catch (error) {
console.error("Ошибка при загрузке постов:", error);
}
};
fetchPosts();
}, []);
return (
<div className="App">
<AppRouter posts={posts} />
</div>
);
}
export default App;
Код AppRouter.jsx:
import React from "react";
import Home from "../components/Home";
import PostList from "../components/PostList";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
const AppRouter = ({ posts }) => {
return (
<Router>
<nav>
<Link to="/">Главная</Link>
<Link to="/posts">Блог</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/posts" element={<PostList posts={posts} />} />
</Routes>
</Router>
);
};
export default AppRouter;
Пробовал вводить npm install, переустановливал react-router-dom и axios, не помогло