這是我的App.js，我想要的是呈現元素& ltadd product/& gt；在里面。儀表板組件中的主要內容div。

儀表板組件是

import React,{useState} from 'react'
import { Outlet } from 'react-router-dom';
import AdminSidebar from '../AdminSidebar/AdminSidebar'
import AdminHeader from '../AdminHeader/AdminHeader';
import "./Dashboard.css"

function Dashboard() {
  const [checkboxChecked, setCheckboxChecked] = useState(false);
  const handleCheckboxChange = (event) => {
    console.log("working")
    const sidebar = document.querySelector(".sidebar");
    const mainContent = document.querySelector(".main-content");
  
    if (sidebar && mainContent) {
      sidebar.style.left = event.target.checked ? "-100%" : "0";
      mainContent.style.marginLeft = event.target.checked ? "0" : "";
      const mainContentHeader = mainContent.querySelector("header");
      if (mainContentHeader) {
        mainContentHeader.style.left = event.target.checked ? "0" : "";
        mainContentHeader.style.width = event.target.checked ? "100%" : "";
        mainContentHeader.style.right = event.target.checked ? "0" : "";
      }
    }
  };

  const handleToggleClick = () => {
    setCheckboxChecked(!checkboxChecked);
    handleCheckboxChange({ target: { checked: !checkboxChecked } });
  };
  

  return (
    <>
      <AdminSidebar/>
      <div className='main-content'>
        <AdminHeader handleToggleClick={handleToggleClick}/>
      </div>
      
      <input type="checkbox" name='' id='sidebar-toggle' onChange={handleCheckboxChange} checked={checkboxChecked}/>
      <label htmlFor="sidebar-toggle" className='body-label' onClick={handleToggleClick}></label>
    </>
  )
}

export default Dashboard

有什么辦法可以做到這一點。我對條件渲染不感興趣。我期待一個好的解決方案 如果有人能幫助我，請幫助我。我試過插座和其他，但不起作用。

# # #儀表板:

<div className='main-content'>
        <AdminHeader handleToggleClick={handleToggleClick} />
        <Outlet /> {/* Render nested routes */}
      </div>