React页面URL搜索查询使用大于/小于运算符不生效问题

你当前写法有两个不符合URL解析规则的问题：

• 你写的>是HTML里大于号的转义字符，仅在HTML渲染场景下会被识别为>，放在URL中只会被当成普通字符串，前后端的参数解析逻辑都识别不出这是比较运算符
• 标准URL查询字符串遵循键=值的基本结构，你直接把运算符插在字段名和参数值中间、没有用等号做键值分隔，不管是浏览器原生的URL解析API，还是React生态常用的react-router、qs等工具，都无法正确拆分出筛选字段、运算符、筛选值三个部分。

业界做URL筛选的通用写法都是完全兼容标准query解析规则的，不需要自定义底层解析逻辑，常见有三种：

1. 运算符后缀写法（最推荐，适配绝大多数场景） #

把比较运算符作为字段名的后缀，用下划线这类固定分隔符和原字段名拼接，筛选值正常跟在等号后即可，比如你的startTime大于指定时间戳的筛选，正确URL写法：

http://my-own-site/recentviolations?f_startTime_gt=1656572103987

通用的运算符后缀约定基本是统一的：

• _gt：大于（greater than）
• _lt：小于（less than）
• _gte：大于等于
• _lte：小于等于
• _ne：不等于
  这种写法的兼容性最好，React侧直接用官方工具就能取值，不需要额外解析：

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

function ViolationTable() {
  const [searchParams] = useSearchParams()
  // 直接拿到大于筛选的时间戳值 1656572103987
  const startTimeGreaterThan = searchParams.get('f_startTime_gt')
  // 把条件传给接口请求逻辑即可
}

包括Antd Table、TanStack Table等常用React表格组件自带的URL筛选同步功能，默认支持的就是这种规则。

2. 运算符独立传参（适合动态切换运算符的场景） #

如果页面上提供了运算符选择控件（比如下拉选大于/小于/等于），可以把运算符和筛选值拆成两个独立参数：

http://my-own-site/recentviolations?f_startTime_op=gt&f_startTime_val=1656572103987

这种写法不需要根据运算符动态改参数名，切换筛选逻辑时只需要修改_op后缀对应的参数值即可。

3. 特殊字符编码写法（不推荐） #

如果一定要把>、<这类符号直接放在参数值里，必须先做URL编码，不能直接写原字符，更不能写HTML转义字符：

• > 编码后为 %3E
• < 编码后为 %3C
  对应写法为：

http://my-own-site/recentviolations?f_startTime=%3E1656572103987

这种写法需要你自己写额外逻辑拆分参数值里的运算符和实际筛选值，通用解析工具不会自动处理，而且部分WAF、服务端网关会拦截带这类编码的URL，容易报非法请求错误，非特殊场景不建议使用。

• 不要在URL拼接逻辑里用HTML转义字符，>/<这类转义只在写JSX模板渲染内容时生效，和URL参数逻辑完全无关
• 不要手动拼接查询字符串，优先用URLSearchParams或者qs库生成参数，避免转义错误：

const searchParams = new URLSearchParams()
searchParams.append('f_startTime_gt', '1656572103987')
const requestUrl = `/recentviolations?${searchParams.toString()}`

• 如果你用的是第三方表格组件，优先看组件文档约定的参数格式，不要自己发明参数规则，避免和组件内置的筛选同步逻辑冲突。

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