{
  "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"
}