本文为开发开源项目的真实开发经历,感兴趣的可以来给我的项目点个star,谢谢啦~
具体博文介绍: 开源|Documind协同文档(接入deepseek-r1、支持实时聊天)Documind 🚀 一个支持实时聊天和接入 - 掘金
传统搜索方式
从搜索框拿到数据后直接传给后端查询
typescript
import { NextResponse } from 'next/server';
export async function POST(request: Request) {
const { search } = await request.json();
// 在这里实现实际的搜索逻辑
return NextResponse.json({ results: [`搜索结果:${search}`] });
}
url持久化搜索
这里就是将q?={search}
放在了当前页面的url
后面,若search
值为abc
及当前q?=abc
typescript
// URL参数持久化方式
export function URLSearch() {
const [search, setSearch] = useSearchParams("q");
const [value, setValue] = useState(search || "");
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
setSearch(value);
};
return (
<form onSubmit={handleSubmit}>
<input
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="URL搜索"
/>
<button type="submit">更新URL</button>
</form>
);
}
url持久化有什么好处?
- 将搜索值存放在url结合hash模式使用可以保持状态持久化:
- 页面刷新不丢失搜索状态
- 复制分享链接对方能直接看到相同搜索结果
- seo友好
- 搜索引擎可直接抓取搜索内容
- 可跨组件抓取搜索参数
通过实战教你如何使用url持久化搜索
首先封装一个hooks
,这里用到了nuq
库我的版本是 "nuqs": "^2.2.3"
/hooks/use-search-params.tsx
typescript
//封装nuqs的useQueryState
import { parseAsString, useQueryState } from "nuqs";
export const useSearchParams = (key:string) => {
return useQueryState(
key,
parseAsString // 1. 类型约束(强制字符串类型)
.withDefault("") // 2. 默认值
.withOptions({
clearOnDefault:true // 3. 自动清理机制
})
);
};
然后在search
组件导入
这样我们就可以通过setValue
来修改搜索内容,此处会以search?={value}
的形式放在当前页面url
后
javascript
import { useSearchParams } from "@/hooks/use-search-params";
export const SearchInput=(){
const [value, setValue] = useSearchParams("search");
}
之后我们就可以在需要使用的地方取出这个value
然后进行之后的一系列操作
typescript
import { useSearchParams } from "@/hooks/use-search-params"
export const mainPage=(){
const [value] = useSearchParams("search");
}