React Router different layout each page - reactjs

Question

I have layout that header and footer components named as MainLayout.
This layout used in Home page.
I want to make another layout that named SubLayout.
This is not have header component, and used in About page.
How to make 2 different layout?
This is what I tried so far below.
Router.js
import React from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import MainLayout from '../components/layouts/MainLayout'
import Home from '../views/home/Home'
import About from '../views/about/About'
export default function Router1() {
return (
<Router>
<Switch>
<Route>
<MainLayout>
<Switch>
<Route path='/' exact component={Home} />
<Route path='/about' component={About} />
</Switch>
</MainLayout>
</Route>
</Switch>
</Router>
)
}
MainLayout
import React from 'react'
import Header from '../../components/layouts/Header'
import Footer from '../../components/layouts/Footer'
export default function Layout({ children }) {
return (
<div className="wrapper">
<Header />
<div className="container">
<div className="content">
{children}
</div>
</div>
<Footer />
</div>
)
}
SubLayout.js
import React from 'react'
import Footer from '../../components/layouts/Footer'
export default function Layout({ children }) {
return (
<div className="wrapper">
<div className="container">
<div className="content">
{children}
</div>
</div>
<Footer />
</div>
)
}

Answer 1

This is not a trivial problem and happens to a lot of website, especially after you have quite a bit pages.
Solution 1
Coding the layout in MainLayout is difficult since you basically have to fix every possible case of this website from now on, which is a challenge.
In order to avoid that, you can have a separate layout component for each page. ex.
export default function Page1() {
return (
<Header />
<YourPage1Content />
)
}
Although this is a bit extra work for each page, it's very flexible. And the solution is highly scalable no matter how many pages (or features, or sites) that you want to support. For example, you can even wire with entirely different header if you want for a particular page.
Solution 2
If you are looking for a generic way of solving this problem and still want to have a MainLayout since this is the wrapper for every pages, it can be done via Context.
export default function MainLayout() {
const { hideHeader } = useContext(LayoutContext)
return (
<>
{!hideHeader && <Header />}
{children}
</>
)
The context will be provided to you via route, or any custom Context.Provider which can be setup in your App.js or index.js
For instance for a particular route,
export default function MainLayout() {
const location = useLocation()
const hideHeader = location.pathname === '/'
return (
<>
{!hideHeader && <Header />}
{children}
</>
)
This approach is quite generic and highly scalable as well, as long as the same context is used for the entire site.
Summary
If you don't know what site you are building, use solution 1, it'll meet any requirement along the way. However if you have a specific need to meet, solution 2 is really pretty to make sure you can live with a generic Layout component.
All in all, it's about how many Layout component you'd like to reuse.

Answer 2

You can wrap either your whole component with the specific layout or you can wrap the route with specific layout to differentiate like,
export default function Router1() {
return (
<Router>
<Switch>
<MainLayout>
<Route path='/' exact component={Home} />
</MainLayout>
<SubLayout>
<Route path='/about' component={About} />
</SubLayout>
</Switch>
</Router>
)}
And there are unnecessary switch and route statements, cleaned it up a little.