@@ -10,24 +10,102 @@ tags:
1010 - query
1111 - hash
1212 - state
13- version : ' 1.0'
13+ version : " 1.0"
1414description : >-
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