React Router V6中前端向MERN后端传递多查询参数的最优方案

前端参数传递（URL写法） #

你当前的参数格式会导致后端收到分散的键值对，需要调整为同键多值的查询字符串格式，让Express能自动识别为数组：

1. 前端筛选状态管理（HomeScreen.js） #

在组件里维护一个筛选状态，把选中的工具标签统一收集到数组：

// HomeScreen.js 示例片段
const [selectedTools, setSelectedTools] = useState([]);

// 标签点击处理逻辑
const handleToolTagClick = (tool) => {
  setSelectedTools(prev => 
    prev.includes(tool) 
      ? prev.filter(t => t !== tool) 
      : [...prev, tool]
  );
};

// 触发筛选请求
const fetchFilteredJobs = () => {
  dispatch(getFilteredJobs(selectedTools));
};

2. 构造规范查询字符串（jobActions.js） #

用URLSearchParams自动生成符合要求的参数，避免手动拼接出错：

// jobActions.js 示例片段
export const getFilteredJobs = (tools) => async (dispatch) => {
  try {
    const params = new URLSearchParams();
    // 给每个工具添加同键的查询参数
    tools.forEach(tool => params.append('tools', tool));
    
    const res = await axios.get(`/api/jobs?${params}`);
    // 后续dispatch状态更新逻辑...
  } catch (err) {
    // 错误处理逻辑...
  }
};

最终生成的请求URL为：/api/jobs?tools=Vue&tools=Sass

后端参数解析与过滤（jobs.js控制器） #

Express会自动将同键多值的查询参数解析为数组（单值时为字符串，需统一格式）：

1. 解析并格式化参数 #

// jobs.js 控制器示例片段
export const getFilteredJobs = async (req, res) => {
  try {
    // 提取tools参数，统一转为数组格式
    const { tools } = req.query;
    const filterTools = Array.isArray(tools) 
      ? tools 
      : tools ? [tools] : []; // 兼容单值或无值的情况

    // 构造MongoDB过滤条件（假设jobs集合的tools字段为数组类型）
    const filter = filterTools.length > 0 ? { tools: { $in: filterTools } } : {};

    // 查询数据库并返回结果
    const jobs = await Job.find(filter);
    res.json(jobs);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
};

2. 扩展多维度筛选（可选） #

如果还有其他筛选维度（如location、experience），可复用相同逻辑：

// 示例：同时处理tools和location筛选
const { tools, location } = req.query;
const filterTools = Array.isArray(tools) ? tools : tools ? [tools] : [];
const filterLocations = Array.isArray(location) ? location : location ? [location] : [];

const filter = {};
if (filterTools.length) filter.tools = { $in: filterTools };
if (filterLocations.length) filter.location = { $in: filterLocations };

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