mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 12:33:04 +00:00
Tomas Dvorak
17 lines
3.1 KiB
JSON
17 lines
3.1 KiB
JSON
{
|
|
"id": "52af0c8ac44e90996ab47936",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "search-parameters",
|
|
"content": "---\ntitle: Search parameters\nuse_cases: \u003e-\n filtering, pagination, search queries, form state in url, shareable urls,\n stateful navigation\ntags:\n - query-params\n - search\n - state\n - url\n - routing\nversion: '1.0'\ndescription: \u003e-\n Manage query strings and search parameters in SolidJS for filtering,\n pagination, and maintaining state in the URL.\n---\n\nSearch parameters are used to pass data to a route using the query string.\nThe query string is the part of the URL that comes after the `?` character and is used to pass key-value pairs to the route.\n\nIn Solid Router, these query parameters can be accessed using [`useSearchParams`](/solid-router/reference/primitives/use-search-params).\nThis primitive retrieves a tuple that contains a reactive object that reads the current search parameters and a function to update them.\n\n```jsx {4}\nimport { useSearchParams } from \"@solidjs/router\";\n\nexport const App = () =\u003e {\n\tconst [searchParams, setSearchParams] = useSearchParams();\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cspan\u003eUsername: {searchParams.username}\u003c/span\u003e\n\t\t\t\u003cinput\n\t\t\t\ttype=\"text\"\n\t\t\t\tonChange={(e) =\u003e {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\tsetSearchParams({ username: e.target.value });\n\t\t\t\t}}\n\t\t\t/\u003e\n\t\t\u003c/div\u003e\n\t);\n};\n```\n\nThe getter, in this case `searchParams`, is used to read the current search parameters.\n`setSearchParams` works as the setter which accepts an _object_ whose entries will be merged into the current query.\n\n## Multiple queries\n\nSince `setSearchParams` accepts an object, you can pass multiple key-value pairs to update multiple search parameters at once.\n\n```jsx\nsetSearchParams({\n\tusername: \"john\",\n\tpage: 1,\n});\n```\n\n:::note[Empty or null values]\n\tIf the value of a search parameter's key is `undefined`, `null`, or an empty\n\tstring (`\"\"`), it will be removed from the query string.\n:::\n\n## Accessing query strings\n\nIf you require accessing the query string directly, you can use the [`useLocation`](/solid-router/reference/primitives/use-location) primitive:\n\n```jsx\nimport { useLocation } from \"@solidjs/router\";\n\nexport const App = () =\u003e {\n\tconst location = useLocation();\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cspan\u003eQuery String: {location.search}\u003c/span\u003e\n\t\t\u003c/div\u003e\n\t);\n};\n```\n\nIf the URL was `http://localhost:3000/users?username=john\u0026page=1`, the output would be `Query String: ?username=john\u0026page=1`.",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/solid-router/concepts/search-parameters.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/solid-router/concepts/search-parameters.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 2372,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "3b08bb650d8521193e6952b8999fdc4e709f253cecf5d080e47f014445312d84",
|
|
"timestamp": "2026-02-23T11:43:00.191835913+01:00"
|
|
} |