Рассмотрите вариант с переносом общих элементов на уровень выше:
const App = () => {
return (
<Page wide={true}>
<Header top={<Top />} />
<SideNav>
<LeftMenu />
</SideNav>
<Content>
<Switch>
<Route path="/" component={Home} />
</Switch>
</Content>
</Page>
);
};
Тем не менее, если вы уверены, что выбрали наиболее подходящий для вашего проекта подход, то общую часть можно перенести в отдельный компонент:
const PageLayout = ({ wide, top, children }) => {
return (
<Page wide={wide}>
<Header top={top ? top : <Top />} />
<SideNav>
<LeftMenu />
</SideNav>
<Content>
{children}
</Content>
</Page>
);
};
Тогда код страниц сократится до:
const Home = () => {
useEffect(() => {
document.title = "Привет";
}, []);
return (
<PageLayout wide>
<Overview />
</PageLayout>
);
};
Для работы с head советую использовать
react-helmet