react-router-dom中useParams无法正确获取URL哈希参数

你用useParams()拿不到参数是因为方向错了——你URL里的access_token、state是在哈希（#）后面的查询参数，而useParams()只能提取路由路径里的动态参数（比如/connectionservice/:userId这种格式里的userId），完全处理不了哈希后的内容。

这里给两种靠谱的实现方式：

方式一：用浏览器原生API解析哈希 #

直接通过window.location.hash拿到哈希部分，再用URLSearchParams解析参数：

import { useEffect, useState } from 'react';

const ConnectionService = () => {
  const [authParams, setAuthParams] = useState({
    access_token: '',
    state: ''
  });

  useEffect(() => {
    // 去掉哈希开头的#，拿到参数串
    const hashStr = window.location.hash.slice(1);
    // 解析参数
    const params = new URLSearchParams(hashStr);
    
    setAuthParams({
      access_token: params.get('access_token'),
      state: params.get('state')
    });
  }, []);

  // 后续就可以直接用authParams里的参数了
  console.log('access_token:', authParams.access_token);
  console.log('state:', authParams.state);

  return <div>你的组件内容</div>;
};

export default ConnectionService;

方式二：结合react-router的useLocation钩子 #

如果你的项目已经在用react-router-dom，用它提供的useLocation来监听哈希变化会更贴合路由生态：

import { useLocation, useEffect, useState } from 'react-router-dom';

const ConnectionService = () => {
  const location = useLocation();
  const [authParams, setAuthParams] = useState({
    access_token: '',
    state: ''
  });

  useEffect(() => {
    const hashStr = location.hash.slice(1);
    const params = new URLSearchParams(hashStr);
    
    setAuthParams({
      access_token: params.get('access_token'),
      state: params.get('state')
    });
  }, [location.hash]); // 哈希变化时重新解析

  console.log('access_token:', authParams.access_token);
  console.log('state:', authParams.state);

  return <div>你的组件内容</div>;
};

export default ConnectionService;

URLSearchParams是浏览器原生支持的API，兼容性覆盖绝大多数现代浏览器，不需要额外安装依赖。如果是OAuth2授权回调这种场景，这种解析方式完全适配哈希模式的返回参数。

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