mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-03 20:13:03 +00:00
Tomas Dvorak
17 lines
4.0 KiB
JSON
17 lines
4.0 KiB
JSON
{
|
|
"id": "725e4325edf011653d9ebe68",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "nesting",
|
|
"content": "---\ntitle: Nesting routes\nuse_cases: \u003e-\n hierarchical pages, parent-child relationships, shared layouts, complex\n routing structures, admin sections\ntags:\n - nesting\n - hierarchy\n - routing\n - layouts\n - config\nversion: '1.0'\ndescription: \u003e-\n Build nested route hierarchies in SolidJS for complex applications with\n parent-child relationships and shared layouts.\n---\n\nNested routes are a way to create a hierarchy of routes in your application.\nThis is useful for creating a [layout](/solid-router/concepts/layouts) that is consistent across multiple pages, or for creating a relationship between pages that are related to each other.\n\nIn Solid Router, the following two route definitions have the same result:\n\n```jsx\n\u003cRoute path=\"/users/:id\" component={User} /\u003e\n\n// is equivalent to\n\n\u003cRoute path=\"/users\"\u003e\n\t\u003cRoute path=\"/:id\" component={User} /\u003e\n\u003c/Route\u003e\n```\n\nIn both cases, the `User` component will render when the URL is `/users/:id`.\nThe difference, however, is that in the first case, `/users/:id` is the only route, and in the second case, `/users` is also a route.\n\n**Note:** visit the [config-based nesting](#config-based-nesting) section for more information on how to nest routes using the configuration-based approach.\n\n## Limitations\n\nWhen nesting routes, only the innermost `Route` component will become its own route.\nFor example, if you were to nest a route, only the innermost route will become its own route, even if the parent routes are also specified and provided with a component:\n\n```jsx\n\u003cRoute path=\"/users\" component={Users}\u003e\n\t\u003cRoute path=\"/:id\" component={User} /\u003e\n\u003c/Route\u003e\n```\n\nFor a parent route to become its own route, it must be specified separately. This can be done by explicitly defining the parent route as well as the nested route:\n\n```jsx\n\u003cRoute path=\"/users\" component={Users} /\u003e\n\u003cRoute path=\"/users/:id\" component={User} /\u003e\n```\n\nAnother way to achieve the same result is to nest the routes and explicitly define the parent route through the use of an empty path, and then specify the nested route:\n\n```jsx\n\u003cRoute path=\"/users\"\u003e\n \u003cRoute path=\"/\" component={Users} /\u003e\n \u003cRoute path=\"/:id\" component={User} /\u003e\n\u003c/Route\u003e\n```\n\nIn both cases, the `Users` component will render when the URL is `/users`, and the `User` component will render when the URL is `/users/:id`.\n\n## Config-based nesting\n\nWhen using configuration-based routing, nesting can be achieved through passing your route definitions into the `children` property of a parent route definition object:\n\n```jsx\nimport { render } from \"solid-js/web\";\nimport { Router } from \"@solidjs/router\";\n\nconst routes = {\n\tpath: \"/\",\n\tcomponent: lazy(() =\u003e import(\"/routes/index.js\")),\n\tchildren: [\n\t\t{\n\t\t\tpath: \"/users\",\n\t\t\tcomponent: lazy(() =\u003e import(\"/routes/users.js\")),\n\t\t\tchildren: [\n\t\t\t\t{\n\t\t\t\t\tpath: \"/:id\",\n\t\t\t\t\tcomponent: lazy(() =\u003e import(\"/routes/user.js\")),\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t],\n};\n\nrender(() =\u003e \u003cRouter\u003e{routes}\u003c/Router\u003e, document.getElementById(\"app\"));\n```\n\nIn this example, when you navigate to `/users/:id`, the `User` component will render.\nSimilarly, when you navigate to `/users`, the `Users` component will render.",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/concepts/nesting.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/solid-router/concepts/nesting.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 3131,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "965f18c2d3e0a58ddb80fcecdee6fe76b3a337dba0ccc89f75abbd64ee955bf4",
|
|
"timestamp": "2026-02-23T11:43:00.191767856+01:00"
|
|
} |