如何在React中借助react-router实现带查询参数的可分享URL？

当然可以！这正是react-router擅长解决的场景之一——把应用状态同步到URL查询参数，既保持单页应用的流畅性，又能让分享的链接直接还原搜索状态，完美匹配你的需求。下面是具体的实现思路和代码示例：

v6是目前react-router的主流版本，API更简洁易用，我们以此为例展开：

1. 确保安装并配置基础路由 #

首先确认项目已经安装了react-router-dom，然后在根组件中配置基础路由结构：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import SearchPage from './SearchPage'; // 你的搜索结果页面组件

function App() {
  return (
    <Router>
      <Routes>
        {/* 匹配根路由，渲染搜索页面 */}
        <Route path="/" element={<SearchPage />} />
      </Routes>
    </Router>
  );
}

2. 用useSearchParams读写URL查询参数 #

在你的搜索页面组件中，使用react-router提供的useSearchParams钩子，它能直接帮你处理URL的search部分：

import { useState, useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';

function SearchPage() {
  // searchParams：当前URL的查询参数对象；setSearchParams：更新参数的方法
  const [searchParams, setSearchParams] = useSearchParams();
  
  // 初始化组件状态：优先从URL参数读取，没有则用默认值
  const [query, setQuery] = useState(searchParams.get('query') || '');
  const [type, setType] = useState(searchParams.get('type') || 'all');

  // 模拟搜索接口
  const fetchResults = (searchType, searchQuery) => {
    console.log(`执行搜索：类型=${searchType}，关键词=${searchQuery}`);
    // 这里替换成你的实际接口调用逻辑
  };

  return (
    <div>
      {/* 搜索表单 */}
      <div>
        <input
          type="text"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="输入关键词..."
        />
        <select value={type} onChange={(e) => setType(e.target.value)}>
          <option value="all">全部类型</option>
          <option value="coins">数字货币</option>
          <option value="stocks">股票</option>
        </select>
        <button onClick={handleSearch}>搜索</button>
      </div>
      {/* 搜索结果展示区域 */}
      <div>搜索结果...</div>
    </div>
  );
}

3. 搜索时同步更新URL参数 #

实现handleSearch方法，在执行搜索逻辑的同时更新URL参数：

const handleSearch = () => {
  // 将当前搜索条件同步到URL
  setSearchParams({ type, query });
  // 执行实际搜索
  fetchResults(type, query);
};

setSearchParams会自动处理URL编码，不用担心特殊字符的问题，而且更新后页面不会刷新。

4. 监听URL参数变化，自动触发搜索 #

当用户直接打开分享的链接（比如hosts.abc.com:3000/?type=all&query=coins），我们需要监听参数变化，自动还原搜索状态：

useEffect(() => {
  // 从URL中获取最新的参数
  const currentQuery = searchParams.get('query') || '';
  const currentType = searchParams.get('type') || 'all';
  // 更新组件内部状态
  setQuery(currentQuery);
  setType(currentType);
  // 自动执行搜索
  fetchResults(currentType, currentQuery);
}, [searchParams]); // 当searchParams变化时触发effect

可选：实时同步表单输入到URL #

如果想让用户输入时URL就实时变化（而不是点击搜索按钮才变），可以修改输入框和下拉框的 onChange 事件：

// 关键词输入框实时同步
const handleQueryChange = (e) => {
  const newQuery = e.target.value;
  setQuery(newQuery);
  // 保留原有参数，只更新query
  setSearchParams(prev => ({ ...Object.fromEntries(prev), query: newQuery }));
};

// 类型选择框实时同步
const handleTypeChange = (e) => {
  const newType = e.target.value;
  setType(newType);
  setSearchParams(prev => ({ ...Object.fromEntries(prev), type: newType }));
};

如果你还在使用v5版本，没有useSearchParams，可以用useLocation和useHistory配合原生URLSearchParams实现：

import { useLocation, useHistory } from 'react-router-dom';

const location = useLocation();
const history = useHistory();
const searchParams = new URLSearchParams(location.search);

// 读取参数
const query = searchParams.get('query') || '';

// 更新参数
const updateSearchParams = (newParams) => {
  Object.entries(newParams).forEach(([key, value]) => {
    searchParams.set(key, value);
  });
  history.push({ search: searchParams.toString() });
};

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