React中如何从第三方URL获取code和scope查询参数？

你用useParams()无法获取参数的核心原因是：它专门用来读取路由路径中的动态参数（比如路由定义为/successful/:userId时，才能拿到userId），而你需要的code和scope属于URL的查询字符串参数（即?后面的键值对），得用对应的方法来获取。

以下分两种场景给出解决方案：

1. React项目（使用React Router v6及以上） #

使用React Router提供的useSearchParams钩子来处理查询参数：

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

function SuccessfulPage() {
  // 获取查询参数对象
  const [searchParams] = useSearchParams();
  
  // 单独获取每个参数
  const code = searchParams.get('code');
  const scope = searchParams.get('scope');

  // 可选：把所有查询参数转成普通对象
  const paramsObj = Object.fromEntries(searchParams);
  // paramsObj 结构为 { code: '3434443A', scope: 'xyz' }

  return (
    <div>
      <p>Code值：{code}</p>
      <p>Scope值：{scope}</p>
    </div>
  );
}

2. 普通JavaScript环境（非React） #

直接使用浏览器原生的URLSearchParams API：

// 如果是指定URL
const targetUrl = new URL('https://localhost:3001/successful?code=3434443A&scope=xyz');
const searchParams = new URLSearchParams(targetUrl.search);

// 如果是当前页面的URL，直接用 window.location.search
// const searchParams = new URLSearchParams(window.location.search);

const code = searchParams.get('code'); // 返回 '3434443A'
const scope = searchParams.get('scope'); // 返回 'xyz'

// 可选：转成普通对象
const paramsObj = Object.fromEntries(searchParams);

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