React类组件中如何动态获取带channelId的URL并发起Fetch请求

方案1：使用withRouter高阶组件 #

类组件无法直接使用useParams，但可以通过react-router-dom提供的withRouter高阶组件，将路由相关的match、location、history属性注入到组件props中：

1. 导入withRouter：

import { withRouter } from 'react-router-dom';

2. 用withRouter包裹类组件：

class ChildComponent1 extends React.Component {
  // 组件逻辑
}

export default withRouter(ChildComponent1);

3. 在组件内获取路由参数并发起请求：

componentDidMount() {
  this.fetchChannelDetail();
}

componentDidUpdate(prevProps) {
  // 当路由中的channelId变化时，重新发起请求
  if (prevProps.match.params.channelId !== this.props.match.params.channelId) {
    this.fetchChannelDetail();
  }
}

fetchChannelDetail = async () => {
  const { channelId } = this.props.match.params;
  try {
    const res = await fetch(`你的接口地址/${channelId}`);
    const data = await res.json();
    this.setState({ detail: data });
  } catch (err) {
    console.error('请求出错:', err);
  }
}

方案2：直接通过路由渲染组件获取match #

如果ChildComponent1是直接通过Route组件的component或render属性渲染的，不需要额外包裹withRouter，路由会自动将match等属性传入组件：

// 路由配置或父组件中
<Route path="/channels/:channelId" component={ChildComponent1} />

此时在ChildComponent1中同样可以通过this.props.match.params.channelId获取参数，请求逻辑和方案1一致。

关于函数组件的误区纠正 #

你提到“状态变化场景下不应使用函数组件”是不准确的——函数组件配合Hooks（如useState、useEffect）完全可以高效处理状态变化，甚至在复杂场景下写法更简洁灵活。如果后续尝试函数组件，实现逻辑会更简洁：

import { useParams, useEffect, useState } from 'react';

const ChildComponent1 = () => {
  const { channelId } = useParams();
  const [detail, setDetail] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch(`你的接口地址/${channelId}`);
        const data = await res.json();
        setDetail(data);
      } catch (err) {
        console.error('请求出错:', err);
      }
    };
    fetchData();
  }, [channelId]);

  // 渲染逻辑
};

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