Skip to content

Commit 28d8d0e

Browse files
Merge branch 'main' into dependabot/npm_and_yarn/solidjs/start-1.2.1
2 parents 9cdc1ed + 1e3a095 commit 28d8d0e

File tree

1 file changed

+90
-12
lines changed

1 file changed

+90
-12
lines changed

src/routes/solid-router/reference/primitives/use-location.mdx

Lines changed: 90 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,102 @@ tags:
1010
- query
1111
- hash
1212
- state
13-
version: '1.0'
13+
version: "1.0"
1414
description: >-
1515
Access reactive URL information with useLocation - track pathname, query
1616
strings, hash, and navigation state in your SolidJS app.
1717
---
1818

19-
Retrieves reactive `location` object useful for getting things like `pathname`
19+
The `useLocation` function provides information about the current URL, including pathname, query strings, hash, and navigation state.
2020

21-
```js
22-
const location = useLocation();
21+
## Import
2322

24-
const pathname = createMemo(() => parsePath(location.pathname));
23+
```ts
24+
import { useLocation } from "@solidjs/router";
2525
```
2626

27-
| attribute | type | description |
28-
| ---------- | ------ | ----------------------------------------------------------------------------------------- |
29-
| `pathname` | string | The pathname part of the URL, without the query string. |
30-
| `search` | string | The query string part of the URL. |
31-
| `hash` | string | The hash part of the URL, including the `#`. |
32-
| `state` | any | Custom state passed from [`useNavigate`](/solid-router/reference/primitives/use-navigate) |
33-
| `query` | object | Returns a store-like object containing all the query parameters of the URL. |
27+
## Type
28+
29+
```ts
30+
const useLocation: <S = unknown>() => Location<S>;
31+
32+
interface Location<S = unknown> extends Path {
33+
query: SearchParams;
34+
state: Readonly<Partial<S>> | null;
35+
}
36+
37+
interface Path {
38+
pathname: string;
39+
search: string;
40+
hash: string;
41+
}
42+
```
43+
44+
## Parameters
45+
46+
None.
47+
48+
## Return value
49+
50+
`useLocation` returns a reactive `Location` object containing the current URL information.
51+
52+
The `Location` object contains:
53+
54+
### `pathname`
55+
56+
**Type:** `string`
57+
58+
The path portion of the URL, beginning with a `/` and excluding the query string and hash.
59+
60+
### `search`
61+
62+
**Type:** `string`
63+
64+
The query string portion of the URL, including the leading `?` character if a parameter exists.
65+
66+
### `hash`
67+
68+
**Type:** `string`
69+
70+
The hash fragment of the URL, including the leading `#` character if a hash exists.
71+
72+
### `state`
73+
74+
**Type:** `Readonly<Partial<S>> | null`
75+
76+
Custom state passed from [`useNavigate`](/solid-router/reference/primitives/use-navigate).
77+
78+
### `query`
79+
80+
**Type:** `SearchParams`
81+
82+
A reactive object containing the parsed query parameters from the URL.
83+
84+
## Examples
85+
86+
### Basic usage
87+
88+
```tsx
89+
import { useLocation } from "@solidjs/router";
90+
91+
function ProductFilter() {
92+
const location = useLocation();
93+
94+
const category = () => location.query.category || "all";
95+
const page = () => location.query.page || "1";
96+
97+
return (
98+
<div>
99+
<p>
100+
Filtering by: {category()}, Page {page()}
101+
</p>
102+
</div>
103+
);
104+
}
105+
```
106+
107+
## Related
108+
109+
- [`useNavigate`](/solid-router/reference/primitives/use-navigate)
110+
- [`useParams`](/solid-router/reference/primitives/use-params)
111+
- [`useSearchParams`](/solid-router/reference/primitives/use-search-params)

0 commit comments

Comments
 (0)