React无法检测URL参数，React Router DOM 4类组件获取参数遇阻求助

嘿，我来帮你搞定这个React Router DOM 4版本下类组件的URL参数获取问题！你的核心代码逻辑其实是对的，只是可能漏了关键的配置或包裹步骤，这也是类组件在React Router 4里常见的小坑。

1. 先确认路由配置是否正确 #

首先要保证你的商品页路由是带参数的格式，这样match.params才能拿到对应的ID：

import { Route } from 'react-router-dom';
import ProductPage from './你的商品组件路径';

// 在路由配置文件里
<Route path="/products/:id" component={ProductPage} />

这里的:id就是URL中对应的参数占位符，必须和你代码里this.props.match.params.id的字段名完全一致。

2. 如果组件不是直接被Route渲染，用withRouter包裹 #

如果你的商品组件是嵌套在其他组件里渲染的（不是直接作为Route的component属性值），那路由相关的match、location等props不会自动注入到组件里，这时候需要用React Router提供的withRouter高阶组件来补上：

import { withRouter } from 'react-router-dom';
import _ from 'lodash'; // 假设你用到了lodash的map方法

class ProductPage extends React.Component {
  componentDidMount() {
    const { id } = this.props.match.params;
    this.props.fetchProduct(id);
  }

  render() {
    const { product } = this.props;
    return _.map(product, prod => {
      return (
        <div className="container" key={prod.id}> {/* 记得加key属性哦 */}
          <section className="pt-15 pb-15">
            {/* 这里放你的商品内容 */}
          </section>
        </div>
      );
    });
  }
}

// 一定要用withRouter包裹后再导出组件
export default withRouter(ProductPage);

3. 最后排查两个常见细节 #

• 确保你的整个应用已经被<BrowserRouter>（或HashRouter）包裹，比如在根组件里：

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

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

• 检查导入的是react-router-dom而不是react-router，两者的导出模块有差异，类组件的路由注入只在react-router-dom里生效。

其实你原本的componentDidMount代码逻辑是没问题的，大概率是路由配置或props注入的环节没做好，按照上面的步骤排查应该就能解决问题啦！

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