mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 04:23:02 +00:00
Tomas Dvorak
17 lines
3.7 KiB
JSON
17 lines
3.7 KiB
JSON
{
|
|
"id": "24821feb5cf3c7630bff6f1b",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "layouts",
|
|
"content": "---\ntitle: Layouts\nuse_cases: \u003e-\n consistent headers/footers, shared navigation, admin panels, dashboard\n layouts, nested ui structure\ntags:\n - layouts\n - nesting\n - ui-structure\n - components\n - routing\nversion: '1.0'\ndescription: \u003e-\n Create consistent page layouts in SolidJS with shared headers, footers, and\n nested structures for better UI organization.\n---\n\nTo maintain consistency across an application's page you can use layouts.\nLayouts are components that wrap the content of a route and can be used to define a common structure for all pages or specific sections of an application.\n\n## Root-level layouts\n\nA root-level layout acts as a container surrounding all routes within your application.\nTo define a root-level layout, pass the layout component to the `root` prop of the `Router` component:\n\n```jsx\nimport { render } from \"solid-js/web\";\nimport { Router, Route } from \"@solidjs/router\";\n\nimport Home from \"./pages/Home\";\n\nconst Layout = (props) =\u003e {\n return (\n \u003c\u003e\n \u003cheader\u003eHeader\u003c/header\u003e\n {props.children}\n \u003cfooter\u003eFooter\u003c/footer\u003e\n \u003c/\u003e\n );\n};\n\nrender(\n () =\u003e (\n \u003cRouter root={Layout}\u003e\n \u003cRoute path=\"/\" component={Home} /\u003e\n \u003cRoute path=\"/hello-world\" component={() =\u003e \u003cdiv\u003eHello world!\u003c/div\u003e} /\u003e\n \u003c/Router\u003e\n ),\n document.getElementById(\"app\")\n);\n```\n\nWith the root-level layout, `props.children` will be replaced with the content of the current route.\nThis means that while the words \"Header\" and \"Footer\" will be displayed on every page, the content between them will change depending on the current route.\nFor example, when the route is `/hello-world`, you will see the text \"Hello world!\" between the header and footer.\n\n## Nested layouts\n\nWhen you want to create a layout that is specific to a group of routes, you can nest routes within a layout component.\nThis can be done by passing `props.children` to the component where the nested routes are defined:\n\n```jsx\nfunction PageWrapper(props) {\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003ch1\u003e We love our users! \u003c/h1\u003e\n\t\t\t{props.children}\n\t\t\t\u003cA href=\"/\"\u003eBack Home\u003c/A\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\nWhile the routes are still configured the same, the route's elements will appear inside the parent element where the `props.children` was declared.\nFor `PageWrapper` to be used as a layout, in this case, you can pass it as a component to the parent route:\n\n```jsx\n\u003cRouter\u003e\n \u003cRoute path=\"/users\" component={PageWrapper}\u003e\n \u003cRoute path=\"/\" component={Users} /\u003e\n \u003cRoute path=\"/:id\" component={User} /\u003e\n \u003c/Route\u003e\n\u003c/Router\u003e\n```\n\nNow, when the route is `/users`, the content of the `Users` component will be displayed inside the `PageWrapper` component.\nSimilarly, when navigating to `/users/1`, the content of the `User` component will be displayed inside the `PageWrapper` component as well.",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/concepts/layouts.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/solid-router/concepts/layouts.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 2851,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "79a9ac79bb96cf43eddda10f1374a05d577b4a6d46353a8eec2883cd66db2190",
|
|
"timestamp": "2026-02-23T11:43:00.191697323+01:00"
|
|
} |