Sugestão: Ao invés de inserir o Cabeçalho e o Rodpaé de forma Hard Coded em Routes, utilizei o recurso de Rotas Aninhadas para definir os elementos padrão das páginas.
O código de routes.js ficou assim:
<Route path="/" element={ <Container /> }>
<Route path="/" element={ <Inicio />}></Route>
<Route path="/favoritos" element={ <Favoritos /> } />
</Route>
</Routes>
</BrowserRouter>E o código do componente Container:
import Cabecalho from "components/Cabecalho"; import Rodape from "components/Rodape"; import { Outlet } from "react-router-dom"; import styles from './Container.module.css'
export default function Padrao() { return (
<Outlet />
<Rodape />
</div>
)}
