只用过传统搜索方式？来试试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持久化有什么好处？

将搜索值存放在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");
}