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 />
    ...