只用过传统搜索方式?来试试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");
}
相关推荐
Anlici41 分钟前
跨域解决方案还有优劣!?
前端·面试
苹果电脑的鑫鑫43 分钟前
在使用element-ui时表单的表头在切换页面时第一次进入页面容易是白色字体解决方法
javascript·vue.js·ui
庸俗今天不摸鱼1 小时前
【万字总结】构建现代Web应用的全方位性能优化体系学习指南(二)
前端·性能优化·webp
忧郁的蛋~1 小时前
JavaScript性能优化的12种方式
开发语言·javascript·性能优化
海盗强1 小时前
prototype和proto的区别
开发语言·javascript·原型模式
潜龙在渊灬1 小时前
杂谈:前端 UI 框架和 UI 组件库的区别
javascript·vue.js·react.js
追寻光1 小时前
Java 绘制图形验证码
java·前端
前端snow1 小时前
爬取数据利用node也行,你知道吗?
前端·javascript·后端
村头一颗草1 小时前
高德爬取瓦片和vue2使用
前端·javascript·vue.js
远山无期1 小时前
vue3+vite项目接入qiankun微前端关键点
前端·vue.js