Oi Luan, tudo bem?
Desculpe a demora em retornar.
Pelo que entendi, você deseja criar uma tela ou rota de administração onde o header e o footer não fiquem visíveis. Uma maneira de fazer isso é utilizando o componente Route do React Router para renderizar a página desejada sem incluir o header e o footer.
Para isso, você pode criar uma nova rota para a página de administração dentro do arquivo routes.tsx e definir um novo componente para essa rota que renderize apenas o conteúdo da página de administração sem incluir o header e o footer. Por exemplo:
<Route path='/admin/:user' element={<AdminLayout />}>
<Route path='/' element={<AdminHome />} />
<Route path='usuarios' element={<AdminUsuarios />} />
</Route>
No exemplo acima, estamos definindo uma rota para a página de administração com o caminho "/admin/:user". Essa rota irá utilizar o componente AdminLayout que irá renderizar o conteúdo da página de administração sem incluir o header e o footer. Em seguida, estamos definindo rotas internas para a página de administração, como a rota "/usuarios" que irá renderizar o componente AdminUsuarios.
Para criar o componente AdminLayout, você pode utilizar a propriedade children do componente Route para renderizar o conteúdo da página de administração e aplicar um CSS para esconder o header e o footer. Por exemplo:
import { Route } from 'react-router-dom';
const AdminLayout = ({ children }) => {
return (
<div className="admin-layout">
{children}
</div>
);
};
No exemplo acima, estamos definindo o componente AdminLayout que irá receber a propriedade children com o conteúdo da página de administração. Em seguida, estamos renderizando esse conteúdo dentro de uma div com a classe "admin-layout", que poderá ser utilizada para aplicar o CSS que irá esconder o header e o footer.
Para esconder o header e o footer, você pode utilizar um CSS para definir a propriedade display como none para esses elementos dentro da div com a classe "admin-layout". Por exemplo:
.admin-layout header,
.admin-layout footer {
display: none;
}
No exemplo acima, estamos utilizando o seletor CSS ".admin-layout header" e ".admin-layout footer" para selecionar o header e o footer dentro da div com a classe "admin-layout" e definir a propriedade display como none, que irá esconder esses elementos.
Com isso, você terá uma página de administração que irá renderizar apenas o conteúdo da página sem incluir o header e o footer.
Espero que tenha te ajudado.
Um abraço e bons estudos.
