React组件挂载时获取URL参数的正确方法是什么？

没问题，你的思路完全可行！用withRouter来获取location props是正确的做法，我帮你把代码补全并把关键细节讲清楚：

首先，我们可以利用浏览器原生的URLSearchParams API来解析URL里的查询参数，比手动拆分字符串要靠谱得多。另外还要考虑组件挂载后URL参数变化的情况（比如用户导航回来修改了参数），这时候需要同步更新状态。

完整的组件代码如下：

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      a1: null,
      a2: null,
    };
  }

  // 抽离一个复用的参数解析函数
  parseUrlParams = () => {
    // 从props里拿到location的search部分（就是?后面的内容）
    const { search } = this.props.location;
    const params = new URLSearchParams(search);
    // 提取a1和a2参数，不存在的话会返回null
    return {
      a1: params.get('a1'),
      a2: params.get('a2'),
    };
  };

  componentDidMount() {
    // 组件挂载时解析参数并更新状态
    const { a1, a2 } = this.parseUrlParams();
    this.setState({
      a1: a1 || null,
      a2: a2 || null,
    });
  }

  // 处理URL参数变化的场景（比如用户修改了URL里的参数）
  componentDidUpdate(prevProps) {
    // 对比前后的search参数，不一样就重新解析
    if (prevProps.location.search !== this.props.location.search) {
      const { a1, a2 } = this.parseUrlParams();
      this.setState({
        a1: a1 || null,
        a2: a2 || null,
      });
    }
  }

  render() {
    const { a1, a2 } = this.state;
    return (
      <div>
        {a1 && <p>参数a1的值：{a1}</p>}
        {a2 && <p>参数a2的值：{a2}</p>}
        {!a1 && !a2 && <p>未获取到a1或a2参数</p>}
      </div>
    );
  }
}

// 一定要用withRouter包裹组件，这样才能拿到路由相关的props
export default withRouter(Example);

关键细节说明： #

• withRouter的作用：它是一个高阶组件，能把location、match、history这些路由相关的props注入到你的组件中，哪怕你的组件不是直接通过<Route>渲染的也能拿到这些值。
• URLSearchParams：这是浏览器原生支持的API，专门用来处理URL查询字符串，兼容性很好（除了IE）。params.get('key')会返回对应参数的值，参数不存在时返回null，正好匹配你初始状态的设置。
• componentDidUpdate的必要性：如果用户在组件挂载后修改了URL参数（比如点击了带新参数的链接），这个生命周期方法会检测到location.search的变化，然后重新解析参数更新状态，保证页面内容和URL参数同步。

这样你的组件就能正确获取并渲染URL参数啦！

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