Не отображается страница 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:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. 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:
  4. You might have mismatching versions of React and the renderer (such as React DOM)
  5. You might be breaking the Rules of Hooks
  6. 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, не помогло


Ответы (0 шт):