如何在React Router v6中使用useSearchParams Hook实现搜索参数功能

实现搜索参数与URL同步方案 #

要实现localhost:3000/关键词?page=页码的URL格式，同时让搜索、分页操作自动同步URL，可按以下步骤修改代码：

步骤1：调整路由配置（App.js）

修改Home路由，支持带关键词的路径参数：

// App.js 中的 Routes 部分
<Routes>
  {/* 支持根路径（无搜索）和带关键词的路径，/:query? 中的?表示参数可选 */}
  <Route path='/:query?' element={<Home />} />
  <Route path='favorites' element={<Favorites />} />
  <Route path='*' element={<Error />} />
</Routes>

步骤2：重构Main.js，用URL参数管理状态

1. 导入所需hooks

在Main.js顶部添加：

import { useSearchParams, useParams } from 'react-router-dom'

2. 替换原有状态，从URL读取参数

删除原来的const [input, setInput] = useState('')和const [page, setPage] = useState(1)，替换为：

// 从路径获取搜索关键词（比如 /cat 中的cat）
const { query } = useParams()
// 管理URL的查询参数（比如 ?page=1）
const [searchParams, setSearchParams] = useSearchParams()
// 解析page参数，默认值为1
const page = searchParams.get('page') ? parseInt(searchParams.get('page')) : 1

// input状态用于控制搜索框的值，和路径参数同步
const [input, setInput] = useState(query || '')

// 当路径中的query变化时，同步更新搜索框的值
useEffect(() => {
  setInput(query || '')
}, [query])

3. 修改搜索提交逻辑，更新URL

原来的handleSubmit函数修改为：

const handleSubmit = async (event) => {
  event.preventDefault();
  const trimmedInput = input.trim()
  if (!trimmedInput) return;
  
  // 提交时更新URL：路径设为搜索关键词，page重置为1
  window.location.pathname = `/${trimmedInput}`
  setSearchParams({ page: 1 })
}

4. 重构图片请求逻辑，基于URL参数请求数据

修改fetchImages函数和触发逻辑：

async function fetchImages() {
  if (!query) return; // 无关键词时不发起请求
  
  try {
    const res = await fetch(`https://api.unsplash.com/search/photos?page=${page}&per_page=30&query=${query}&client_id=${process.env.REACT_APP_UNSPLASH_API_KEY}`)
    const data = await res.json()
    
    if (data.total !== 0) {
      setAllImages(data.results)
      setIsVisible(true)
    } else {
      setAllImages([])
      setIsVisible(false)
    }
  } catch(error) {
    setError(error)
  }
}

// 当路径关键词或page参数变化时，自动请求图片
useEffect(() => {
  fetchImages()
}, [query, page])

5. 修改分页逻辑，更新URL的page参数

替换原来的handlePrev和handleNext：

function handlePrev() {
  if (page <= 1) return;
  setSearchParams({ page: page - 1 })
}

function handleNext() {
  setSearchParams({ page: page + 1 })
}

6. 移除localStorage相关逻辑（可选）

现在URL已保存搜索状态，刷新页面会自动从URL读取参数并请求数据，可移除所有localStorage相关的useEffect代码，简化逻辑。

步骤3：Header.js无需修改

Header.js中的搜索框逻辑保持不变，input状态会和URL参数自动同步，提交时触发URL更新。

效果验证 #

• 搜索提交后，URL变为localhost:3000/关键词?page=1
• 点击分页按钮，URL的page参数自动更新，同时加载对应页码的图片
• 直接在URL输入localhost:3000/dog?page=2，页面自动加载dog关键词第2页的图片
• 刷新页面，搜索条件和分页状态从URL恢复，不会丢失

内容的提问来源于stack exchange，提问作者haharimoto