[Dúvida] PÁGINA PADRÃO - LAYOUT

Olá Fabio, tudo bem?

Ao invés de utilizar Flexbox apenas, porque não utilizar flex com grid? Vou deixar alguns cursos e materiais de referências para te ajudar a entender como montar um layout como esse com essas ferramentas.

• CSS: construindo layouts com Grid
• CSS: Flexbox e layouts responsivos
• Praticando CSS: Grid e Flexbox

Estes três cursos podem te ajudar com esta tarefa.

Espero ter ajudado!

Bom dia, Tudo bem!

Minha dúvida na verdade é de como elaborar o layout informado no tópico anterior utilizando o React Router, estou tentando implementar de acordo com o modelo ensinado no curso, tipo como deixar o Menu e o Header fixos, e somente carregar as diferentes páginas contidas no menu vertical.

Desculpe, Fabio! Achei que fosse algo relacionado a CSS já que vi o código e imaginei que você gostaria de saber como posicionar os elementos na tela.

Então, acho que o que você pode fazer é o seguinte:

1. Crie um componente < PaginaPadrao />, onde você pode renderizar o Menu e o Cabecalho, que são comuns em todas as páginas, bem como os filhos que foram passados como propriedades usando props.children. Esses filhos serão as páginas que você deseja exibir, aquele conteúdo que será adicionado no PÁGINAS COM CONTEÚDOS DISTINTOS.

function PaginaPadrao(props) {
  return (
    <>
      <Menu />
      <Cabecalho />
      ,<Outlet />
    </>
  );
}

1. Crie um arquivo routes.js e importe os componentes que você irá utilizar. Em seguida, faça como você já fez, renderize o componente de página padrão e as outras rotas como rotas aninhadas dentro dele. Essas rotas aninhadas ocuparão o espaço do sendo substituídas pela página que exibe o conteúdo correspondente quando a aplicação renderizar.

import { Route } from 'react-router-dom';
import PaginaPadrao from './PaginaPadrao';
import Contato from './Contato';
import Cadastro from './Contato';
import NotFound from './NotFound';

export default function Routes() {
  return (
    <Routes>
       <Route path='/' element={<PaginaPadrao />} >
         <Route index element={<Inicio />} />
         <Route path='#' element={<Cadastro />} />
         <Route path='#' element={<Contato />} />
         </Route>
       <Route path='*' element={<NotFound />} />
     </Routes>
  );
}

Dessa forma, você tem no componente de página padrão os componentes que são comuns em todas as páginas, então eles vão aparecer em todas as páginas, e você pode exibir o conteúdo das outras páginas por meio de rotas aninhadas.

Espero ter ajudado!