Extract a RedwoodJS Layout Component
RedwoodJS gives us a cli command to generate layouts.
yarn redwood generate layout main
This will generate a MainLayout component in src/layouts/MainLayout/. We can use this layout component to define any headers or footers we want to share across multiple pages.
Instructor: [00:00] Here we have a nav component in our IndexPage. If we hop over to our AboutPage, we don't have any nav component. We could add a nav component here, but then when we make a change to our nav component in the Index, we'll have to go to every page and update it if we wanted it to be the same.
[00:24] Instead, we can extract a layout component. Redwood has a generate function for us. We can go yarn rw g layout, and then the first argument to layout is the name of the component that we want to make. We will call this main. Redwood has generated a MainLayout component. Let's go look at it.
[00:54] A layout component is expected to render children, because a layout component is a way to wrap your specific pages, so an AboutPage or IndexPage, with the content that you don't want to redefine every time, such as a header, or a footer, or some sort of side panel.
[01:15] We will hop over to our IndexPage and we'll grab our nav. We'll cut that. Then we'll go back to our layout. We'll paste our nav and we'll wrap our children in a main. We'll let Prettier do its thing.
[01:41] As you can see, we need to import a Link and routes, so import { Link, routes } from '@redwoodjs/router'. We can go back to our IndexPage and get rid of this. We can import MainLayout from 'src/layouts/MainLayout'.
[02:15] As you can see, I didn't do an absolute path. Redwood aliases your src directory so that you can import anything from the top down. Instead of this wrapping div we're going to use MainLayout. We'll open our terminal and yarn rw dev.
[02:39] Let's hop over to our browser. You can see that our header is still there. Now let's add this MainLayout component to our AboutPage, import MainLayout from 'src/layouts/ MainLayout'. Now we have About. Let's add our path to index().
[03:31] That's how you extract a layout component.