如何在React Router Dom中实现复选框值动态拼接生成URL链接

方案1：适配你现有路由结构的实现 #

你当前的路由是把筛选参数拼到searchField路由参数段里，按你的需求实现如下：

1. 管理复选框选中状态与跳转逻辑 #

import { useState } from 'react';
import { useHistory } from 'react-router-dom'; // 如果你用的是v6版本，替换为import { useNavigate } from 'react-router-dom'

const SearchForm = () => {
  // 存储基础搜索内容
  const [searchInput, setSearchInput] = useState('some_content');
  // 存储已选中的复选框键名
  const [checkedFilters, setCheckedFilters] = useState([]);
  // 路由跳转实例 v5
  const history = useHistory();
  // v6版本替换为 const navigate = useNavigate();

  // 复选框选中状态变更处理
  const handleCheckChange = (e) => {
    const filterKey = e.target.name;
    if (e.target.checked) {
      setCheckedFilters(prev => [...prev, filterKey]);
    } else {
      setCheckedFilters(prev => prev.filter(item => item !== filterKey));
    }
  };

  // 搜索跳转逻辑
  const handleSearch = () => {
    // 拼接选中的筛选参数串
    const filterStr = checkedFilters.map(key => `${key}=1`).join('&');
    // 组合完整的searchField段，无选中筛选项时不加&
    const fullSearchField = filterStr ? `${searchInput}&${filterStr}` : searchInput;
    // 编码参数避免特殊字符异常，page默认传第一页1，可按需修改
    const targetPath = `/Pesquisar/${encodeURIComponent(fullSearchField)}/1`;
    // v5跳转
    history.push(targetPath);
    // v6版本替换为 navigate(targetPath);
  };

  return (
    <div>
      <input
        type="text"
        value={searchInput}
        onChange={(e) => setSearchInput(e.target.value)}
        placeholder="输入搜索内容"
      />
      <div className="checkbox-group">
        <label>
          <input
            type="checkbox"
            name="circular"
            checked={checkedFilters.includes('circular')}
            onChange={handleCheckChange}
          />
          CIRCULAR
        </label>
        <label>
          <input
            type="checkbox"
            name="parecer"
            checked={checkedFilters.includes('parecer')}
            onChange={handleCheckChange}
          />
          PARECER
        </label>
        <label>
          <input
            type="checkbox"
            name="lei"
            checked={checkedFilters.includes('lei')}
            onChange={handleCheckChange}
          />
          LEI
        </label>
      </div>
      <button onClick={handleSearch}>触发搜索</button>
    </div>
  );
};

2. 目标页面Pesquisa取参逻辑 #

// v5版本取参
const Pesquisa = (props) => {
  // 从路由参数取对应值
  const { searchField, page } = props.match.params;
  // 解码参数
  const decodedSearch = decodeURIComponent(searchField);
  // 拆分基础搜索内容和筛选参数
  const [baseSearchContent, ...filterPairs] = decodedSearch.split('&');
  // 把筛选参数转成对象方便业务使用，格式为 {circular: '1', parecer: '1'}
  const filterMap = Object.fromEntries(filterPairs.map(pair => pair.split('=')));

  // 后续业务逻辑直接使用baseSearchContent、page、filterMap即可
};

// v6版本取参
import { useParams } from 'react-router-dom';
const Pesquisa = () => {
  const { searchField, page } = useParams();
  // 后续解码、拆分逻辑和v5版本一致
};

方案2：更规范的查询参数实现（推荐） #

你当前把&拼接的参数塞到路由path段的写法不符合URL规范，后续维护成本高，更推荐用标准的URL查询参数（即?后面的部分）实现：

1. 修改路由配置 #

// 不需要把筛选参数写到path规则里，保留基础路径即可
<Route exact path="/Pesquisar/:page" component={withRouter(Pesquisa)} />

2. 跳转逻辑调整 #

const handleSearch = () => {
  const searchParams = new URLSearchParams();
  // 存入基础搜索内容
  searchParams.set('searchField', searchInput);
  // 存入所有选中的筛选项
  checkedFilters.forEach(key => searchParams.set(key, '1'));
  // 拼接完整路径
  const targetPath = `/Pesquisar/1?${searchParams.toString()}`;
  history.push(targetPath);
};

3. 目标页面取参更简单 #

// v5版本取参
const Pesquisa = (props) => {
  const { page } = props.match.params;
  const searchParams = new URLSearchParams(props.location.search);
  // 直接取值即可
  const searchField = searchParams.get('searchField');
  const isCircularChecked = searchParams.get('circular') === '1';
  const isParecerChecked = searchParams.get('parecer') === '1';
};

// v6版本取参
import { useParams, useSearchParams } from 'react-router-dom';
const Pesquisa = () => {
  const { page } = useParams();
  const [searchParams] = useSearchParams();
  const searchField = searchParams.get('searchField');
  const isCircularChecked = searchParams.get('circular') === '1';
};

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