旧版React Router如何配置带查询参数的路由并提取code参数

React Router 全版本的路径匹配规则仅对URL的pathname部分生效，?后面的内容属于查询字符串（query参数），不属于路径匹配的范围，你在path属性里写?code=:code属于语法错误，自然无法命中路由。

直接移除path中查询参数相关的片段，仅匹配到callback路径即可：

<TestRoute
  // authenticated={true}
  path={`${userRoute}/test/callback`}
  component={CallBackHandler}
  history={history}
/>

只要请求的pathname部分为/testgroup/test/callback，无论后面携带什么查询参数，都会命中该路由，不需要在路由规则里单独声明查询参数的匹配逻辑。

根据你使用的具体小版本，选对应写法即可：

• React Router v3及更早版本：组件props中自带的location对象已经内置了查询参数解析结果，直接读取即可：

  function CallBackHandler(props) {
    const code = props.location.query.code;
    // 拿到code值后直接写后续业务逻辑
    return <div>回调处理中</div>
  }
  

• React Router v4/v5版本：这几个版本移除了内置的query解析能力，直接用浏览器原生API解析location.search即可，不需要额外引入第三方工具：

  function CallBackHandler(props) {
    const searchParams = new URLSearchParams(props.location.search);
    const code = searchParams.get('code');
    return <div>回调处理中</div>
  }
  

不要为了适配路由把规则改成callback/:code的路径参数形式，第三方回调的地址格式是固定带?查询参数的，修改路径匹配规则不会改变第三方的跳转逻辑，反而会导致真实请求无法命中路由。

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