Layouts
When developing an application with multiple views or pages, we need to consider layout reusability.
Consider the following example:
Figure 4.1 – Layouts example
We can see that the navbar and the footer are the same on both pages and the main content comes between, so it is a good idea to make it reusable.
There are two ways to add the layout component to pages:
- Wrap the returned JSX of every page with the layout component
- Attach the layout to the page component and use it to wrap the entire component
Wrapping JSX of every page with the layout component
Let’s say we have a layout component that can wrap the content of each page:
const Layout = ({ children }) => {
return (
<div>
<Header />
...