React类组件URL传ID调用API时参数为null如何解决

问题根因 #

你两种方案失效分别对应两个错误：

1. 路由配置未声明动态路径参数占位符，导致this.props.match.params无法识别到路径中的ID值
2. 第二种方案调用的searchParams.get()用于获取?开头的查询参数，你的ID属于路径参数，不属于查询参数，自然返回null

解决步骤 #

1. 修改路由配置，补充动态参数占位符

将原有Route配置修改为如下格式，占位符名称group_Id需要和你Link跳转时拼接的参数名、后续取值时的参数名完全一致（大小写严格对应）：

<Route path="/GroupsDetail/:group_Id" component={GroupsDetail}/>

2. 类组件中正确获取路径参数

直接通过路由注入的match对象获取即可，注意参数名和路由配置里的占位符完全匹配：

// 注意和路由占位符一致，是group_Id不是大写开头的Group_Id
const groupId = this.props.match.params.group_Id
// 拼接API请求地址
const url = `http://localhost:0000/api/Group/GroupDetailsDisplay?GroupId=${groupId}`

替代方案（无需修改路由的原生解析方式） #

如果不想调整路由配置，也可以手动拆分哈希路径拿参数，不推荐生产环境使用，兼容性不如路由自带方法：

// 拆分哈希路由的路径段拿ID
const hashSegments = window.location.hash.slice(1).split('/')
const groupId = hashSegments[hashSegments.length - 1]
const url = `http://localhost:0000/api/Group/GroupDetailsDisplay?GroupId=${groupId}`

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