mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-03 20:13:03 +00:00
Tomas Dvorak
17 lines
3.9 KiB
JSON
17 lines
3.9 KiB
JSON
{
|
|
"id": "77c820358b816857eedaa7b8",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "config",
|
|
"content": "---\ntitle: Config-based routing\nuse_cases: \u003e-\n centralized routing, lazy loading, config-based setup, dynamic imports,\n performance optimization\ntags:\n - config\n - lazy-loading\n - routing\n - performance\n - setup\nversion: '1.0'\ndescription: \u003e-\n Configure SolidJS routes with config objects for centralized routing, lazy\n loading, and optimized performance.\n---\n\nSolid Router supports config-based routing, which offers the same capabilities as [component routing](/solid-router/getting-started/component).\nThe decision to use config-based routing over component routing depends largely on personal preference.\n\nTo define a single route, a route definition object can be passed to the [`\u003cRouter\u003e`](/solid-router/reference/components/router) component:\n\n```jsx\nimport { lazy } from \"solid-js\";\nimport { render } from \"solid-js/web\";\nimport { Router } from \"@solidjs/router\";\n\nconst routes = {\n path: \"/\",\n component: lazy(() =\u003e import(\"/routes/index.js\")),\n}\n\nrender(() =\u003e \u003cRouter\u003e{routes}\u003c/Router\u003e, document.getElementById(\"app\"));\n```\n\nIn the route definition object, a `path` property must be provided to define the path to match and a `component` property that specifies the component (or element) to render when the path matches.\n\nTo define multiple routes, an array of route definition objects can be passed to the `\u003cRouter\u003e` component:\n\n```jsx\nimport { lazy } from \"solid-js\";\nimport { render } from \"solid-js/web\";\nimport { Router } from \"@solidjs/router\";\n\nconst routes = [\n {\n path: \"/\",\n component: lazy(() =\u003e import(\"/routes/index.js\")),\n },\n {\n path: \"/hello-world\",\n component: () =\u003e \u003ch1\u003eHello, World!\u003c/h1\u003e\n },\n {\n path: \"/about\",\n component: lazy(() =\u003e import(\"/routes/about.js\")),\n }\n]\n\nrender(() =\u003e \u003cRouter\u003e{routes}\u003c/Router\u003e, document.getElementById(\"app\"));\n```\n\nEach path in the array of route definition objects will be matched against the current URL, and the corresponding component will be rendered when a match is found.\nIn the example above, the root path (`/`) renders the `Home` page, the path `/hello-world` renders an `h1` element, and the path `/about` renders the `About` component.\n\n:::note[Lazy Loading]\nWhen using configuration-based routing, it is best practice to use the [`lazy`](/reference/component-apis/lazy) component to load components asynchronously.\nThis will help improve the performance of your application by only loading the components when they are needed.\n\n```jsx\nimport { lazy } from \"solid-js\";\nimport { render } from \"solid-js/web\";\nimport { Router } from \"@solidjs/router\";\n\nconst routes = [\n {\n path: \"/\",\n component: lazy(() =\u003e import(\"/routes/index.js\")),\n },\n {\n path: \"/hello-world\",\n component: () =\u003e \u003ch1\u003eHello, World!\u003c/h1\u003e\n },\n {\n path: \"/about\",\n component: lazy(() =\u003e import(\"/routes/about.js\")),\n }\n]\n\nrender(() =\u003e \u003cRouter\u003e{routes}\u003c/Router\u003e, document.getElementById(\"app\"));\n```\n\nTo learn more about lazy loading, see the page on [lazy loading components](/solid-router/advanced-concepts/lazy-loading).\n:::",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/getting-started/config.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/solid-router/getting-started/config.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 3106,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "1eefae6b6a1ae1d8e04c3e023897ee5e6c3673c49c62b2a0fb451066d9ae1701",
|
|
"timestamp": "2026-02-23T11:43:00.192133403+01:00"
|
|
} |