|
| 1 | +--- |
| 2 | +sidebar_position: 3 |
| 3 | +--- |
| 4 | + |
| 5 | +# Page layouts |
| 6 | + |
| 7 | +This guide examines the abstraction of a _page layout_ — when several pages share the same overall structure, and differ only in the main content. |
| 8 | + |
| 9 | +:::info |
| 10 | + |
| 11 | +Is your question not covered by this guide? Post your question by leaving feedback on this article (blue button on the right) and we will consider expanding this guide! |
| 12 | + |
| 13 | +::: |
| 14 | + |
| 15 | +## Simple layout |
| 16 | + |
| 17 | +The simplest layout can be seen on this page. It has a header with site navigation, two sidebars, and a footer with external links. There is no complicated business logic, and the only dynamic parts are sidebars and the switchers on the right side of the header. Such a layout can be placed entirely in `shared/ui` or in `app/layouts`, with props filling in the content for the sidebars: |
| 18 | + |
| 19 | +```tsx title="shared/ui/layout/Layout.tsx" |
| 20 | +import { Link, Outlet } from "react-router-dom"; |
| 21 | +import { useThemeSwitcher } from "./useThemeSwitcher"; |
| 22 | + |
| 23 | +export function Layout({ siblingPages, headings }) { |
| 24 | + const [theme, toggleTheme] = useThemeSwitcher(); |
| 25 | + |
| 26 | + return ( |
| 27 | + <div> |
| 28 | + <header> |
| 29 | + <nav> |
| 30 | + <ul> |
| 31 | + <li> <Link to="/">Home</Link> </li> |
| 32 | + <li> <Link to="/docs">Docs</Link> </li> |
| 33 | + <li> <Link to="/blog">Blog</Link> </li> |
| 34 | + </ul> |
| 35 | + </nav> |
| 36 | + <button onClick={toggleTheme}>{theme}</button> |
| 37 | + </header> |
| 38 | + <main> |
| 39 | + <SiblingPageSidebar siblingPages={siblingPages} /> |
| 40 | + <Outlet /> {/* This is where the main content goes */} |
| 41 | + <HeadingsSidebar headings={headings} /> |
| 42 | + </main> |
| 43 | + <footer> |
| 44 | + <ul> |
| 45 | + <li>GitHub</li> |
| 46 | + <li>Twitter</li> |
| 47 | + </ul> |
| 48 | + </footer> |
| 49 | + </div> |
| 50 | + ); |
| 51 | +} |
| 52 | +``` |
| 53 | + |
| 54 | +```ts title="shared/ui/layout/useThemeSwitcher.ts" |
| 55 | +export function useThemeSwitcher() { |
| 56 | + const [theme, setTheme] = useState("light"); |
| 57 | + |
| 58 | + function toggleTheme() { |
| 59 | + setTheme(theme === "light" ? "dark" : "light"); |
| 60 | + } |
| 61 | + |
| 62 | + useEffect(() => { |
| 63 | + document.body.classList.remove("light", "dark"); |
| 64 | + document.body.classList.add(theme); |
| 65 | + }, [theme]); |
| 66 | + |
| 67 | + return [theme, toggleTheme] as const; |
| 68 | +} |
| 69 | +``` |
| 70 | + |
| 71 | +The code of sidebars is left as an exercise for the reader 😉. |
| 72 | + |
| 73 | +## Using widgets in the layout |
| 74 | + |
| 75 | +Sometimes you want to include certain business logic in the layout, especially if you're using deeply nested routes with a router like [React Router][ext-react-router]. Then you can't store the layout in Shared or in Widgets due to [the import rule on layers][import-rule-on-layers]: |
| 76 | + |
| 77 | +> A module in a slice can only import other slices when they are located on layers strictly below. |
| 78 | +
|
| 79 | +Before we discuss solutions, we need to discuss if it's even a problem in the first place. Do you _really need_ that layout, and if so, does it _really need_ to be a Widget? If the block of business logic in question is reused on 2-3 pages, and the layout is simply a small wrapper for that widget, consider one of these two options: |
| 80 | + |
| 81 | +1. **Write the layout inline on the App layer, where you configure the routing** |
| 82 | + This is great for routers that support nesting, because you can group certain routes and apply the layout only to them. |
| 83 | + |
| 84 | +2. **Just copy-paste it** |
| 85 | + The urge to abstract code is often very overrated. It is especially the case for layouts, which rarely change. At some point, if one of these pages will need to change, you can simply do the change without needlessly affecting other pages. If you're worried that someone might forget to update the other pages, you can always leave a comment that describes the relationship between the pages. |
| 86 | + |
| 87 | +If none of the above are applicable, there are two solutions to include a widget in the layout: |
| 88 | + |
| 89 | +1. **Use render props or slots** |
| 90 | + Most frameworks allow you to pass a piece of UI externally. In React, it's called [render props][ext-render-props], in Vue it's called [slots][ext-vue-slots]. |
| 91 | +2. **Move the layout to the App layer** |
| 92 | + You can also store your layout on the App layer, for example, in `app/layouts`, and compose any widgets you want. |
| 93 | + |
| 94 | +## Further reading |
| 95 | + |
| 96 | +- There's an example of how to build a layout with authentication with React and Remix (equivalent to React Router) in the [tutorial][tutorial]. |
| 97 | + |
| 98 | +[tutorial]: /docs/get-started/tutorial |
| 99 | +[import-rule-on-layers]: /docs/reference/layers#import-rule-on-layers |
| 100 | +[ext-react-router]: https://reactrouter.com/ |
| 101 | +[ext-render-props]: https://www.patterns.dev/react/render-props-pattern/ |
| 102 | +[ext-vue-slots]: https://vuejs.org/guide/components/slots |
0 commit comments