点击跳转时this.props.match.params?.id返回undefined如何解决

手动输入地址时页面整体刷新，路由会重新初始化匹配参数，所以功能正常；点击跳转属于单页应用内的无刷新路由切换，此时出现参数获取失败可按以下方案排查解决：

1. 适配React Router v6的参数获取逻辑 #

如果你使用的是React Router v6版本，官方已移除class组件默认注入的match属性，也废弃了withRouter高阶组件，这是最常见的触发原因。你需要自行封装高阶组件注入路由参数：

// 封装高阶组件，给class组件传入路由相关属性
const withRouter = (Component) => (props) => {
  const params = useParams();
  const navigate = useNavigate();
  const location = useLocation();
  return <Component {...props} params={params} navigate={navigate} location={location} />;
}

// 导出ExpenseDetails组件时用高阶组件包裹
export default withRouter(ExpenseDetails);

// 组件内调整id获取逻辑
componentDidMount() {
  const id = this.props.params?.id;
  // 后续请求逻辑保持不变
}

2. 修正React Router v5的路由配置 #

如果是v5版本，直接在Route标签内嵌套组件不会自动注入match、history等路由属性，需要改用component属性绑定组件：

// 错误写法：不会给ExpenseDetails注入路由属性
<Route path="/expense/:id">
  <ExpenseDetails />
</Route>

// 正确写法
<Route path="/expense/:id" component={ExpenseDetails} />

如果确实需要嵌套写法，要手动传递路由属性：

<Route path="/expense/:id" render={(routeProps) => <ExpenseDetails {...routeProps} />} />

3. 补全路由参数变化的监听逻辑 #

如果是在同路由路径下切换不同id（比如从/expense/1跳转到/expense/2），组件不会重新挂载，componentDidMount只会触发一次，无法拿到新的id，需要新增componentDidUpdate生命周期处理参数变化：

componentDidUpdate(prevProps) {
  const prevId = prevProps.match?.params?.id;
  const currentId = this.props.match?.params?.id;
  // id发生变化且存在有效值时重新发起请求
  if (prevId !== currentId && currentId) {
    axios.get(`/expense/${currentId}`).then((res) => {
      if (res.data.success) {
        this.setState({
          expense: res.data.expense,
          init: 1,
        });
      }
    });
  }
}

4. 校验跳转逻辑的路径正确性 #

检查触发跳转的Link组件或者history.push/navigate调用的路径是否拼接正确，避免出现少斜杠、拼写错误等问题：

// 正确示例
<Link to={`/expense/${expenseItem.id}`}>查看详情</Link>

// 错误示例：缺少前缀斜杠会导致路径拼接错误
<Link to={`expense/${expenseItem.id}`}>查看详情</Link>

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