update

devour_data/docs/path-parameters.json

@@ -0,0 +1,17 @@
+{
+  "id": "8167ab42f078ad91629aa3db",
+  "source": "solid:signals",
+  "type": "github-document",
+  "title": "path-parameters",
+  "content": "---\ntitle: Path parameters\nuse_cases: \u003e-\n  dynamic content, user profiles, resource ids, filtering data, validation,\n  flexible routing\ntags:\n  - parameters\n  - validation\n  - dynamic\n  - wildcards\n  - routing\nversion: '1.0'\ndescription: \u003e-\n  Capture and validate dynamic URL parameters in SolidJS routes for flexible\n  content display and data-driven pages.\n---\n\nParameters within a route are used to capture dynamic values from the URL.\nThis is useful for creating routes that are more flexible and can handle different values.\n\n```jsx\n\u003cRoute path=\"/users/:id\" component={User} /\u003e\n\n```\n\nIn this example, the `:id` parameter will capture any value that comes after `/users/` in the URL.\nThe colon `:` is used to denote a parameter, and `id` is the name of the parameter.\nWhen a URL matches this route, the `User` component will be rendered.\n\n:::note[Animations \u0026 Transitions]\nRoutes that share the same path match will be treated as the same route.\nIf a force re-render is needed, you can wrap your component in a keyed [`Show`](/reference/components/show) component:\n\n```jsx\n\u003cShow when={params.something} keyed\u003e\n  \u003cMyComponent /\u003e\n\u003c/Show\u003e\n\n```\n\n:::\n\n## Accessing parameters\n\nYou can retrieve the values captured by parameters using [`useParams`](/solid-router/reference/primitives/use-params).\n\n```jsx frame=\"terminal\" title=\"http://localhost:3000/users/123\"\nimport { useParams } from \"@solidjs/router\";\n\nfunction User() {\n    const params = useParams();\n    return \u003cdiv\u003eUser ID: {params.id}\u003c/div\u003e; {/* Output: User ID: 123 */}\n}\n\n```\n\n## Validating parameters\n\nEach path parameter can be validated using the `MatchFilter` on the `Route` component.\nRather than checking for the presence of a parameter manually, you can use a `MatchFilter` to ensure that the parameter is in the correct format.\n\n```jsx\nimport { lazy } from \"solid-js\";\nimport { render } from \"solid-js/web\";\nimport { Router, Route } from \"@solidjs/router\";\n\nconst User = import(\"./pages/User\");\n\nconst filters = {\n  parent: [\"mom\", \"dad\"], // allow enum values\n  id: /^\\d+$/, // only allow numbers\n  withHtmlExtension: (v: string) =\u003e v.length \u003e 5 \u0026\u0026 v.endsWith(\".html\"), // we want an `*.html` extension\n};\n\nrender(() =\u003e (\n  \u003cRouter\u003e\n    \u003cRoute\n      path=\"/users/:parent/:id/:withHtmlExtension\"\n      component={User}\n      matchFilters={filters}\n    /\u003e\n  \u003c/Router\u003e\n), document.getElementById(\"app\"));\n\n```\n\nHere, the `matchFilter` prop validates the `parent`, `id`, and `withHtmlExtension` parameters against the specified filters defined in the `filters` object.\nIf the validation fails, the route will not match and the component will not be rendered.\n\nIn this example, that means:\n- `/users/mom/123/contact.html` would match,\n- `/users/dad/456/about.html` would match,\n- `/users/aunt/123/contact.html` would not match as `:parent` is not 'mom' or 'dad',\n- `/users/mom/me/contact.html` would not match as `:id` is not a number,\n- `/users/dad/123/contact` would not match as `:withHtmlExtension` is missing .html.\n\n## Optional parameters\n\nParameters can be made optional by adding a `?` after the parameter name.\n\n```jsx\n\u003cRoute path=\"/users/:id?\" component={User} /\u003e\n\n```\n\nWith this setup, the route would match both `/users` and `/users/123`.\nHowever, it is important to note that the `?` only makes the parameter optional for the last segment of the path.\nAs a result, paths beyond the optional parameter will _not_ be matched.\nFor instance, `/users/123/contact` would not match.\n\n## Wildcard routes\n\nWildcard routes can be used to match any number of segments in a path.\nTo create a wildcard route, use `*` followed by the parameter name.\n\n```jsx\n\u003cRoute path=\"/users/*\" component={User} /\u003e\n\n```\n\nUsing an asterisk `*` as a parameter will match any number of segments after `/users`.\nThis includes `/users`, `/users/123`, `/users/123/contact`, and so on.\n\nIf you need to expose the wildcard segments of the path, you can name them:\n\n```jsx\n\u003cRoute path=\"/users/*rest\" component={User} /\u003e\n\n```\n\nIn this case, `rest` will contain the rest of the path after `/users/`.\n\nIt is important to note that wildcard routes must be located at the **end of the path**.\nIf you place a wildcard route before the end, such as `/users/*rest/:id`, no routes will be matched.",
+  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/concepts/path-parameters.mdx",
+  "metadata": {
+    "path": "src/routes/solid-router/concepts/path-parameters.mdx",
+    "repo": "solidjs/solid-docs",
+    "repo_url": "https://github.com/solidjs/solid-docs.git",
+    "size": 4347,
+    "source_type": "github"
+  },
+  "hash": "2ed2012a7d443b06368420aa822ffc38cc126da6faa0726b08f9d80c0608c659",
+  "timestamp": "2026-02-23T11:43:00.191803673+01:00"
+}