3
3
** Final Destination:** ` docs/router/framework/react/how-to/build-search-filtering-systems.md `
4
4
** Progressive Series Position:** Specialized Use Cases - Guide #9
5
5
** Depends On:** ` setup-basic-search-params.md ` , ` navigate-with-search-params.md ` , ` validate-search-params.md `
6
- ** Status:** Ready for implementation - comprehensive UI patterns available
6
+ ** Status:** Ready for implementation - comprehensive UI patterns available
7
7
8
8
---
9
9
@@ -18,47 +18,41 @@ import { Link, useSearch } from '@tanstack/react-router'
18
18
19
19
function SearchResults() {
20
20
const search = useSearch ({ from: ' /search' })
21
-
21
+
22
22
return (
23
23
<div >
24
24
{ /* Preserve search query, change view */ }
25
25
<nav >
26
- <Link search = { (prev ) => ({ ... prev , view: ' grid' })} >
27
- Grid View
28
- </Link >
29
- <Link search = { (prev ) => ({ ... prev , view: ' list' })} >
30
- List View
31
- </Link >
26
+ <Link search = { (prev ) => ({ ... prev , view: ' grid' })} >Grid View</Link >
27
+ <Link search = { (prev ) => ({ ... prev , view: ' list' })} >List View</Link >
32
28
</nav >
33
-
29
+
34
30
{ /* Pagination with query preservation */ }
35
31
<div >
36
32
{ search .page > 1 && (
37
33
<Link search = { (prev ) => ({ ... prev , page: prev .page - 1 })} >
38
34
Previous
39
35
</Link >
40
36
)}
41
-
37
+
42
38
<Link search = { (prev ) => ({ ... prev , page: (prev .page || 1 ) + 1 })} >
43
39
Next
44
40
</Link >
45
41
</div >
46
-
42
+
47
43
{ /* Related searches */ }
48
44
<div >
49
45
Related searches:
50
- { [
51
- ' laptops gaming' ,
52
- ' laptops business' ,
53
- ' laptops student'
54
- ].map (suggestion => (
55
- <Link
56
- key = { suggestion }
57
- search = { (prev ) => ({ ... prev , query: suggestion , page: 1 })}
58
- >
59
- { suggestion }
60
- </Link >
61
- ))}
46
+ { [' laptops gaming' , ' laptops business' , ' laptops student' ].map (
47
+ (suggestion ) => (
48
+ <Link
49
+ key = { suggestion }
50
+ search = { (prev ) => ({ ... prev , query: suggestion , page: 1 })}
51
+ >
52
+ { suggestion }
53
+ </Link >
54
+ ),
55
+ )}
62
56
</div >
63
57
</div >
64
58
)
@@ -77,36 +71,36 @@ const sortOptions = [
77
71
{ value: ' relevance' , label: ' Relevance' },
78
72
{ value: ' price-asc' , label: ' Price: Low to High' },
79
73
{ value: ' price-desc' , label: ' Price: High to Low' },
80
- { value: ' rating' , label: ' Customer Rating' }
74
+ { value: ' rating' , label: ' Customer Rating' },
81
75
]
82
76
83
77
function FilterNavigation() {
84
78
const search = useSearch ({ from: ' /products' })
85
-
79
+
86
80
return (
87
81
<aside >
88
82
{ /* Category filters */ }
89
83
<div >
90
84
<h3 >Categories</h3 >
91
- { categories .map (category => (
85
+ { categories .map (( category ) => (
92
86
<Link
93
87
key = { category }
94
88
search = { (prev ) => ({
95
89
... prev ,
96
90
category: prev .category === category ? undefined : category ,
97
- page: 1
91
+ page: 1 ,
98
92
})}
99
93
className = { search .category === category ? ' active' : ' ' }
100
94
>
101
95
{ category }
102
96
</Link >
103
97
))}
104
98
</div >
105
-
99
+
106
100
{ /* Sort options */ }
107
101
<div >
108
102
<h3 >Sort By</h3 >
109
- { sortOptions .map (option => (
103
+ { sortOptions .map (( option ) => (
110
104
<Link
111
105
key = { option .value }
112
106
search = { (prev ) => ({ ... prev , sort: option .value , page: 1 })}
@@ -116,7 +110,7 @@ function FilterNavigation() {
116
110
</Link >
117
111
))}
118
112
</div >
119
-
113
+
120
114
{ /* Clear all filters */ }
121
115
<Link
122
116
search = { (prev ) => {
@@ -140,33 +134,31 @@ import { useNavigate } from '@tanstack/react-router'
140
134
141
135
function SearchControls() {
142
136
const navigate = useNavigate ()
143
-
137
+
144
138
const handleSortChange = (sortBy : string ) => {
145
139
navigate ({
146
- search : (prev ) => ({ ... prev , sort: sortBy , page: 1 })
140
+ search : (prev ) => ({ ... prev , sort: sortBy , page: 1 }),
147
141
})
148
142
}
149
-
143
+
150
144
const handleClearFilters = () => {
151
145
navigate ({
152
146
search : (prev ) => {
153
147
const { category, minPrice, maxPrice, ... rest } = prev
154
148
return rest
155
- }
149
+ },
156
150
})
157
151
}
158
-
152
+
159
153
return (
160
154
<div >
161
155
<select onChange = { (e ) => handleSortChange (e .target .value )} >
162
156
<option value = " relevance" >Sort by Relevance</option >
163
157
<option value = " price-asc" >Price: Low to High</option >
164
158
<option value = " price-desc" >Price: High to Low</option >
165
159
</select >
166
-
167
- <button onClick = { handleClearFilters } >
168
- Clear Filters
169
- </button >
160
+
161
+ <button onClick = { handleClearFilters } >Clear Filters</button >
170
162
</div >
171
163
)
172
164
}
@@ -177,6 +169,7 @@ function SearchControls() {
177
169
## Implementation Notes
178
170
179
171
### Additional Content Needed:
172
+
180
173
- [ ] Complete e-commerce filtering example
181
174
- [ ] Advanced filter combinations (price ranges, multi-select)
182
175
- [ ] Filter state persistence and sharing
@@ -187,11 +180,13 @@ function SearchControls() {
187
180
- [ ] Mobile-responsive filter patterns
188
181
189
182
### Cross-References to Add:
183
+
190
184
- Link to ` setup-basic-search-params.md ` for foundation
191
185
- Link to ` navigate-with-search-params.md ` for navigation patterns
192
186
- Link to ` validate-search-params.md ` for filter validation
193
187
- Forward link to ` search-params-with-data-loading.md ` for data integration
194
188
195
189
### README Update Required:
190
+
196
191
- [ ] Mark guide as completed in progressive series
197
- - [ ] Uncomment "Common Next Steps" in related guides
192
+ - [ ] Uncomment "Common Next Steps" in related guides
0 commit comments