- Objective: 搜索查询
- Breadcrumb:
# 概念阐释
## 语义
查询参数是 URL 中问号后面的部分，例如`https://www.google.com/search?q=codecademy`，如果你在 Google 搜索引擎中键入codecademy 就会出现搜索关键词的结果。
## 语法
```js
import { useSearchParams } from 'react-router-dom';
let [searchParams, setSearchParams] = useSearchParams();
const title = searchParams.get('title');
```
- 从 react router导入 useSearchParams钩子
- 解构useSearchParams，设置查询参数与重置查询参数
- 获取查询参数的键并返回结果，这个名称可以查看 localhost 的URL
# 实例
```js
import { useSearchParams } from 'react-router-dom';
// Rendered when a user visits "/list?order=DESC"
export const SortedList = (numberList) => {
const [ searchParams, setSearchParams ] = useSearchParams();
const sortOrder = searchParams.get('order');
console.log(sortOrder); // Prints "DESC"
};
```
```js
import { useSearchParams } from 'react-router-dom';
// Rendered when a user visits "/list"
export const List = (numberList) => {
const [ searchParams, setSearchParams ] = useSearchParams();
// render the numberList in ascending order
<button click={ () => setSearchParams( {order: 'ASC'} ) }>
Sort
</button>
}
```
# 相关内容
# 参考资料
- 本地文件夹：react_router_v6_lession_starting_code
- Article.js
- [GPT](https://chat.openai.com/share/3708fc5b-1447-4d21-bf34-80404120175f)
- [query parameter - codecademy](https://www.codecademy.com/content-items/2ace4407d49746c1a8b3973f1e1eef75/exercises/2022-audit-query-parameters)