react-router-dom多查询字符串不生效问题求助（v4.2.2）

嘿，我来帮你搞定这个问题！你现在遇到的核心问题是搞混了路由动态参数和URL查询字符串的区别——这俩是完全不同的参数传递方式，读取方法自然也不一样。

先理清楚区别 #

你当前配置的/:confirmation_code/:username是路由动态参数，对应的URL格式是/confirmuser/986797/5f1，这种情况下才能用this.props.match.params拿到值。但你想要的是?confirmation_code=986797&username=5f1这种查询字符串格式，它不属于路由路径的一部分，所以match.params肯定读不到。

解决方案步骤 #

1. 调整路由配置

首先把Route的path改成不需要动态参数的形式，因为查询字符串不需要在路由路径里定义：

<Route path="/confirmuser" component={ConfirmUser} />

不管查询字符串是什么，只要路径是/confirmuser，这个Route就会匹配生效。

2. 在组件中解析查询参数

React Router 4.2.2会把location作为props传给被Route渲染的组件，我们可以通过this.props.location.search拿到查询字符串部分，再用以下方式解析：

方法一：使用原生URLSearchParams（推荐）

现代浏览器都支持这个API，用法简单：

// 在ConfirmUser组件的componentDidMount或render中
componentDidMount() {
  const searchParams = new URLSearchParams(this.props.location.search);
  const confirmationCode = searchParams.get('confirmation_code');
  const username = searchParams.get('username');
  
  // 现在就能拿到你要的参数啦
  console.log('验证码:', confirmationCode);
  console.log('用户名:', username);
}

方法二：手动解析（兼容旧浏览器）

如果需要兼容IE这类不支持URLSearchParams的浏览器，可以自己写个解析函数：

// 定义一个解析查询字符串的工具函数
const parseQueryParams = (searchStr) => {
  return searchStr.slice(1).split('&').reduce((params, pair) => {
    const [key, value] = pair.split('=');
    params[key] = decodeURIComponent(value);
    return params;
  }, {});
};

// 在组件中使用
componentDidMount() {
  const queryParams = parseQueryParams(this.props.location.search);
  const confirmationCode = queryParams.confirmation_code;
  const username = queryParams.username;
}

方法三：使用第三方库（可选）

如果你不想自己写解析逻辑，可以用query-string这个npm包，安装后直接调用：

import queryString from 'query-string';

componentDidMount() {
  const queryParams = queryString.parse(this.props.location.search);
  const confirmationCode = queryParams.confirmation_code;
  const username = queryParams.username;
}

3. 注意事项

如果你的ConfirmUser组件不是直接被Route的component属性渲染的（比如是嵌套在其他组件里），记得用withRouter高阶组件包裹它，这样才能拿到location props：

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

class ConfirmUser extends Component {
  // ...组件逻辑
}

export default withRouter(ConfirmUser);

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