Как исправить rerender компонентов React?

Question

[QnaTwitt]

У меня есть такие компоненты:

import { FC } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Dashboard from './pages/Dashboard';
import Users from './pages/Users';

import '../styles/admin.client.scss';

const AdminRootClient: FC = () => {
  return (
    <Router>
      <Routes>
        <Route path="/admin/dashboard" element={<Dashboard />} />
        <Route path="/admin/users" element={<Users />} />
      </Routes>
    </Router>
  );
};

export default AdminRootClient;

import { FC, ReactNode, useEffect, useState } from 'react';
import Navigation from './components/Navigation';
import Header from './components/Header';

interface IAdminLayout {
  children: ReactNode;
}

const AdminLayout: FC<IAdminLayout> = ({ children }) => {
  const [isNavOpen, setIsNavOpen] = useState(false);

  useEffect(() => {
    const handleClick = (event: MouseEvent) => {
      if (
        event.target instanceof HTMLElement &&
        !event.target.closest('.admin-navigation') &&
        !event.target.closest('.admin-header__burger')
      ) {
        setIsNavOpen(false);
      }
    };

    document.addEventListener('click', handleClick);

    return () => {
      document.removeEventListener('click', handleClick);
    };
  }, [setIsNavOpen]);

  return (
    <div className="admin-wrapper">
      <Navigation isNavOpen={isNavOpen} />
      <Header isNavOpen={isNavOpen} setIsNavOpen={setIsNavOpen} />
      <div className="admin-main">
        <div className="admin-main__content">{children}</div>
      </div>
    </div>
  );
};

export default AdminLayout;

import { FC } from 'react';
import { Link } from 'react-router-dom';

interface INavigation {
  isNavOpen: boolean;
}

const Navigation: FC<INavigation> = ({ isNavOpen }) => {
  return (
    <div className="admin-navigation" style={{ transform: isNavOpen && 'translateX(0)' }}>
      <nav>
        <Link to="/admin/dashboard">Dashboard</Link>
        <Link to="/admin/users">Users</Link>
      </nav>
    </div>
  );
};

export default Navigation;

import { FC } from 'react';

interface IHeader {
  isNavOpen: boolean;
  setIsNavOpen: (isNavOpen: boolean) => void;
}

const Header: FC<IHeader> = ({ setIsNavOpen, isNavOpen }) => {
  return (
    <header className="admin-header">
      <div className="admin-header__wrapper">
        <button className="admin-header__burger" onClick={() => setIsNavOpen(!isNavOpen)}>
          <i className="icon icon-burger-btn"></i>
        </button>
      </div>
    </header>
  );
};

export default Header;

import AdminLayout from '../AdminLayout';

const Users = () => {
  return <AdminLayout>users</AdminLayout>;
};

export default Users;

import AdminLayout from '../AdminLayout';

const Dashboard = () => {
  return <AdminLayout>Dashboard</AdminLayout>;
};

export default Dashboard;

Как можно сделать так, что бы при изменении route происходил ререндеринг только этой части?

<div className="admin-main">
        <div className="admin-main__content">{children}</div>
      </div>

А не происходил rerender)

Comments

[szQocks]

когда прилетает новый children то там хоть стой хоть падай будут ререндер всего компонента