Inertia.js报错'usePage必须在Inertia组件内使用'的解决求助

usePage是Inertia提供的React Hook，必须在Inertia组件树内部的函数组件或自定义Hook中调用。你的问题出在两个核心点：

1. 你将__函数挂载到window.__，这意味着它可能在组件上下文之外被调用（比如非组件环境、组件渲染前），此时不仅违反了React Hook的使用规则，也无法访问Inertia的上下文
2. __本身是普通函数，不是符合规范的自定义Hook（自定义Hook必须以use开头），直接在其中调用usePage完全打破了Hook的运行机制

方案1：改为自定义Hook（推荐，符合React规范） #

把翻译逻辑封装成自定义Hook，仅在组件内部使用，同时遵循Hook命名规则：

// translations.jsx
import { usePage } from "@inertiajs/react";

export function useTranslations() {
  const { language } = usePage().props;

  const __ = (key, replace = {}) => {
    if (!language || !language[key]) return key;
    
    let translation = language[key];
    Object.keys(replace).forEach(k => {
      translation = translation.replace(`:${k}`, replace[k]);
    });
    return translation;
  };

  return { __ };
}

在组件中使用示例：

// 任意Page组件
import { useTranslations } from '../Shared/translations';

export default function Dashboard() {
  const { __ } = useTranslations();
  return <h1>{__('dashboard.title')}</h1>;
}

方案2：通过全局Inertia对象获取语言数据（支持全局调用） #

Inertia会在全局暴露window.Inertia对象，其中包含当前的page数据，可直接用来改造翻译函数：

// translations.jsx
export function __(key, replace = {}) {
  // 从全局Inertia对象读取language
  const language = window.Inertia?.page?.props?.language;
  
  if (!language || !language[key]) return key;
  
  let translation = language[key];
  Object.keys(replace).forEach(k => {
    translation = translation.replace(`:${k}`, replace[k]);
  });
  return translation;
}

注意：必须确保在Inertia初始化完成后调用该函数，也就是createInertiaApp的setup执行之后，避免window.Inertia尚未挂载。

方案3：在Inertia初始化时注入语言数据 #

在app.jsx的setup阶段，将当前语言数据绑定到翻译函数，再挂载到全局：

// translations.jsx
export function createTranslator(language) {
  return function __(key, replace = {}) {
    if (!language || !language[key]) return key;
    
    let translation = language[key];
    Object.keys(replace).forEach(k => {
      translation = translation.replace(`:${k}`, replace[k]);
    });
    return translation;
  };
}

修改app.jsx的setup逻辑：

// app.jsx
import { createTranslator } from "./Shared/translations";

// ...其他代码

createInertiaApp({
  // ...其他配置项
  setup({ el, App, props }) {
    const root = createRoot(el);
    root.render(<App {...props} />);
    
    // 绑定当前language到翻译函数，挂载到window
    window.__ = createTranslator(props.language);
  },
});

该方案支持全局调用翻译函数，但如果后续有语言切换操作，需要重新更新全局的__函数。

内容的提问来源于stack exchange，提问作者Fidelis E Peter