update

devour_data/docs/dynamic-routes.json

@@ -0,0 +1,17 @@
+{
+  "id": "a9c215f90c60b04e86ba5d32",
+  "source": "solid:signals",
+  "type": "github-document",
+  "title": "dynamic-routes",
+  "content": "---\ntitle: Dynamic routes\nuse_cases: \u003e-\n  user profiles, product pages, blog posts, id-based content, variable urls,\n  data-driven pages\ntags:\n  - dynamic\n  - parameters\n  - validation\n  - wildcards\n  - routing\nversion: '1.0'\ndescription: \u003e-\n  Build dynamic routes with parameters in SolidJS for user profiles, products,\n  and content that changes based on URL values.\n---\n\nWhen a path is unknown ahead of time, it can be treated as a flexible parameter that is passed on to the component:\n\n```jsx\nimport { lazy } from \"solid-js\";\nimport { render } from \"solid-js/web\";\nimport { Router, Route } from \"@solidjs/router\";\n\nconst Users = lazy(() =\u003e import(\"./pages/Users\"));\nconst User = lazy(() =\u003e import(\"./pages/User\"));\nconst Home = lazy(() =\u003e import(\"./pages/Home\"));\n\nrender(\n\t() =\u003e (\n\t\t\u003cRouter\u003e\n\t\t\t\u003cRoute path=\"/users\" component={Users} /\u003e\n\t\t\t\u003cRoute path=\"/users/:id\" component={User} /\u003e\n\t\t\t\u003cRoute path=\"/\" component={Home} /\u003e\n\t\t\u003c/Router\u003e\n\t),\n\tdocument.getElementById(\"app\")\n);\n```\n\nThe colon (`:`) indicates that `id` can be any string.\nOnce a URL matches the pattern, the `User` component will be shown.\nWhen using dynamic segments, the values can be accessed via the [`useParams`](/solid-router/reference/primitives/use-params) primitive within the component.\n\n:::note[Note on Animation/Transitions]\nRoutes that share the same path match will be treated as the same route.\nIf you want to force re-render you can wrap your component in a keyed [`Show`](/concepts/control-flow/conditional-rendering) like:\n\n```jsx\n\u003cShow when={params.something} keyed\u003e\n\t\u003cMyComponent /\u003e\n\u003c/Show\u003e\n```\n\n:::\n\nEach path parameter can be validated using a `MatchFilter`.\nThis allows for more complex routing descriptions rather than just checking the presence of a parameter.\n\n```jsx\nimport { lazy } from \"solid-js\";\nimport { render } from \"solid-js/web\";\nimport { Router, Route } from \"@solidjs/router\";\nimport type { SegmentValidators } from \"./types\";\n\nconst User = lazy(() =\u003e import(\"./pages/User\"));\n\nconst filters: MatchFilters = {\n\tparent: [\"mom\", \"dad\"], // allow enum values\n\tid: /^\\d+$/, // only allow numbers\n\twithHtmlExtension: (v: string) =\u003e v.length \u003e 5 \u0026\u0026 v.endsWith(\".html\"), // we want an `*.html` extension\n};\n\nrender(\n\t() =\u003e (\n\t\t\u003cRouter\u003e\n\t\t\t\u003cRoute\n\t\t\t\tpath=\"/users/:parent/:id/:withHtmlExtension\"\n\t\t\t\tcomponent={User}\n\t\t\t\tmatchFilters={filters}\n\t\t\t/\u003e\n\t\t\u003c/Router\u003e\n\t),\n\tdocument.getElementById(\"app\")\n);\n\n```\n\nHere, `matchFilters` prop allows for validation of the `parent`, `id` and `withHtmlExtension` parameters against the filters defined in `filters`.\nIf the validation fails, the route will not match.\n\nSo in this example:\n\n- `/users/mom/123/contact.html` would match,\n- `/users/dad/123/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 specified as optional by adding a question mark to the end of the parameter name:\n\n```jsx\n// Matches stories and stories/123 but not stories/123/comments\n\u003cRoute path=\"/stories/:id?\" component={Stories} /\u003e\n```\n\n## Wildcard routes\n\n`:param` provides an arbitrary name at that point in the path.\nUsing an asterisk (`*`) will provide a way to match any end of the path:\n\n```jsx\n// Matches any path that begins with foo, including foo/, foo/a/, foo/a/b/c\n\u003cRoute path=\"foo/*\" component={Foo} /\u003e\n```\n\nIf the wild part of the path to the component as a parameter needs to be exposed, it can be named:\n\n```jsx\n\u003cRoute path=\"foo/*any\" component={Foo} /\u003e\n```\n\n**Note:** that the wildcard token must be the last part of the path; `foo/*any/bar` will not create any routes.\n\n## Multiple paths\n\nRoutes also support defining multiple paths using an array.\nThis allows a route to remain mounted and not rerender when switching between two or more locations that it matches:\n\n```jsx\n// Navigating from login to register does not cause the Login component to re-render\n\u003cRoute path={[\"login\", \"register\"]} component={Login} /\u003e\n```",
+  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/concepts/dynamic-routes.mdx",
+  "metadata": {
+    "path": "src/routes/solid-router/concepts/dynamic-routes.mdx",
+    "repo": "solidjs/solid-docs",
+    "repo_url": "https://github.com/solidjs/solid-docs.git",
+    "size": 4113,
+    "source_type": "github"
+  },
+  "hash": "94723d84926611edc538b4f201b76a0322880586184d70b8e23fdc0d2abb6cd5",
+  "timestamp": "2026-02-23T11:43:00.191663279+01:00"
+}