🚀 Как избавиться от "тряски" компонентов при переключении страниц в React?

Сегодня хочу показать вам простой способ, как сделать ваш интерфейс более плавным при навигации между страницами.

Вы замечали, что при переходе между роутами компоненты "мигают" или резко перерисовываются? Особенно это бросается в глаза, когда вы используете React Router и на каждой новой странице заново монтируются одни и те же элементы (например, хедер или футер).

Решение — layout routes

React Router предлагает отличный способ: использовать layout routes. Это позволяет сохранять общие компоненты между страницами без их размонтирования.

Вот пример:

// Layout.jsx
import { Outlet } from "react-router-dom";

export default function Layout() {
  return (
    <>
      <Header />
      <main>
        <Outlet />
      </main>
      <Footer />
    </>
  );
}

// App.jsx
import { Routes, Route } from "react-router-dom";
import Layout from "./Layout";
import Home from "./pages/Home";
import About from "./pages/About";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
      </Route>
    </Routes>
  );
}

Теперь Header и Footer не будут размонтироваться, и интерфейс останется стабильным при переходах.

👀 Плюс: можно добавить плавные анимации переходов с помощью framer-motion без артефактов.

Попробуйте — разница ощущается сразу.

📲 Мы в MAX

✍️ @React_lib