React Router中使用useParams获取loader数据时触发无效钩子调用错误

错误根源：useParams()是React钩子，只能在函数组件或自定义钩子的顶层作用域调用，你在路由loader函数里调用它，违反了钩子的使用规则，因此触发"Invalid hook call"错误。

React-Router的loader函数本身会接收一个包含路由参数的上下文对象，直接从这个对象里提取username即可，无需调用useParams()。

修改后的代码如下：

import { useLoaderData } from "react-router-dom";

export async function githubInfoLoader({ params }) { // 接收React-Router传入的上下文参数
  const { username } = params; // 直接从params中获取路由参数
  let url = `https://api.github.com/users/kunal22-gupta`;
  if (username) url = `https://api.github.com/users/${username}`;
  const response = await fetch(url);
  return response.json();
}

export default function Github() {
  const data = useLoaderData();
  return (
    <div>
      <h1 className="text-center text-2xl py-5">
        Github followers: {data.followers}
      </h1>
      <div className="flex justify-center mb-10">
        <img
          src={data.avatar_url}
          alt="pfp"
          width={300}
          className="rounded-full"
        />
      </div>
    </div>
  );
}

核心改动：

• 给githubInfoLoader添加{ params }参数，这是React-Router自动传入的路由上下文
• 从params中解构username，替代原来的useParams()调用

修改后loader就能正确获取路由参数，发起对应GitHub用户信息请求，同时符合React钩子的使用规范，错误会被修复。

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