{
  "id": "1853b1634bbb3ba177d3aef8",
  "source": "solid:signals",
  "type": "github-document",
  "title": "component",
  "content": "---\ntitle: Component routing\nuse_cases: \u003e-\n  defining routes, jsx routing, template-based routing, initial setup, basic\n  navigation\ntags:\n  - jsx\n  - components\n  - routing\n  - setup\n  - templates\nversion: '1.0'\ndescription: \u003e-\n  Define routes using JSX components in SolidJS Router for intuitive,\n  template-based routing in your applications.\n---\n\nIn Solid Router, routes can be defined directly in an application's template using JSX.\nThis is the most common way to define routes in Solid Router.\n\nTo define routes using JSX, the [`Route`](/solid-router/reference/components/route) is added to the [`\u003cRouter\u003e`](/solid-router/reference/components/router) component for each path you want to define:\n\n```jsx\nimport { render } from \"solid-js/web\";\nimport { Router, Route } from \"@solidjs/router\";\n\nimport Home from \"./routes/Home\";\n\nrender(\n    () =\u003e (\n        \u003cRouter\u003e\n            \u003cRoute path=\"/\" component={Home} /\u003e\n        \u003c/Router\u003e\n    ),\n    document.getElementById(\"app\")\n);\n```\n\nThe Route component takes a `path` prop, which is the path to match, and a `component` prop, where you pass the component (or element) to render when the path matches.\nIn the example above, the `Home` page is rendered when the user navigates to the root path `/`.\n\nTo apply multiple routes to the router, add additional `Route` components to the `Router`:\n\n```jsx\nimport { render } from \"solid-js/web\";\nimport { Router, Route } from \"@solidjs/router\";\n\nimport Home from \"./routes/index.jsx\";\nimport About from \"./routes/about.jsx\";\n\nrender(\n    () =\u003e (\n        \u003cRouter\u003e\n            \u003cRoute path=\"/\" component={Home} /\u003e\n            \u003cRoute path=\"/hello-world\" component={() =\u003e \u003ch1\u003eHello World!\u003c/h1\u003e} /\u003e\n            \u003cRoute path=\"/about\" component={About} /\u003e\n        \u003c/Router\u003e\n    ),\n    document.getElementById(\"app\")\n);\n```\n\nThis example defines three routes: the root path (`/`) which renders the `Home` page, the path `/hello-world` which renders an `h1` element, and the path `/about` which renders the `About` component.",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/getting-started/component.mdx",
  "metadata": {
    "path": "src/routes/solid-router/getting-started/component.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 2009,
    "source_type": "github"
  },
  "hash": "5b3cca8ba62bf7c2639705c3bbaacb262da94ada47379d9a7e07f6d93260c7ac",
  "timestamp": "2026-02-23T11:43:00.192094199+01:00"
}