React Router Future Flag Warning

У меня почему-то не работает дизайн страницы в консоли такая дичь:

React Router Future Flag Warning: React Router will begin wrapping state updates in React.startTransition in v7. You can use the v7_startTransition future flag to opt-in early. For more information, see

Пытался фиксить, но не получается, вот фулл код:

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar.tsx';
import Home from './pages/Home.tsx';
import Tournaments from './pages/Tournaments.tsx';
import Teams from './pages/Teams.tsx';
import TeamProfile from './components/TeamProfile.tsx';
import AdminPanel from './pages/AdminPanel.tsx';
import TeamRegistration from './pages/TeamRegistration.tsx';
import { useAuthStore } from './store/authStore.ts';
import './index.css';

function App() {
  const { isAdmin } = useAuthStore();

  return (
    <Router future={{
      v7_relativeSplatPath: true,
    }}>
      <div className="min-h-screen bg-gradient-to-b from-gray-900 to-black text-white">
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/tournaments" element={<Tournaments />} />
          <Route path="/teams" element={<Teams />} />
          <Route path="/teams/:teamId" element={<TeamProfile />} />
          <Route path="/register" element={<TeamRegistration />} />
          {isAdmin && <Route path="/admin" element={<AdminPanel />} />}
        </Routes>
      </div>
    </Router>
  );
}

export default App;

дизайн из файла index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply bg-gray-900 text-white;
  }
}

@layer utilities {
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  }
}

введите сюда описание изображения

App.css:

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

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