mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-03 20:13:03 +00:00
Tomas Dvorak
17 lines
2.8 KiB
JSON
17 lines
2.8 KiB
JSON
{
|
|
"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"
|
|
} |