只用过传统搜索方式?来试试url持久化搜索

本文为开发开源项目的真实开发经历,感兴趣的可以来给我的项目点个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持久化有什么好处?

  1. 将搜索值存放在url结合hash模式使用可以保持状态持久化:
    • 页面刷新不丢失搜索状态
    • 复制分享链接对方能直接看到相同搜索结果
  2. seo友好
    • 搜索引擎可直接抓取搜索内容
  3. 可跨组件抓取搜索参数

通过实战教你如何使用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");
}
相关推荐
2301_764441332 分钟前
小说文本分析工具:基于streamlit实现的文本分析
前端·python·信息可视化·数据分析·nlp
jackl的科研日常16 分钟前
“个人陈述“的“十要“和“十不要“
前端
一个处女座的程序猿O(∩_∩)O20 分钟前
Vue 中 this 使用指南与注意事项
前端·javascript·vue.js
程序员大澈37 分钟前
7个 Vue 路由守卫的执行顺序
javascript·vue.js
程序员大澈1 小时前
4个 Vue mixin 的原理拆解
javascript·vue.js
程序员大澈1 小时前
3个 Vue $set 的应用场景
javascript·vue.js
大有数据可视化1 小时前
数字孪生像魔镜,映照出无限可能的未来
前端·html·webgl
程序员大澈1 小时前
3个 Vue nextTick 原理的关键点
javascript·vue.js
一个处女座的程序猿O(∩_∩)O1 小时前
使用 Docker 部署前端项目全攻略
前端·docker·容器
bin91531 小时前
DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加列宽调整功能,示例Table14_10空状态的固定表头表格
前端·javascript·vue.js·ecmascript·deepseek