React集成Inertia.js时Head组件报错：类型'{ children: Element[]; }'无匹配属性

你遇到的类型错误是因为Inertia.js的Head组件不支持通过子元素（如<title>、<meta>标签）配置页面头部信息，它的API设计是通过props传递相关配置项，而非传统的嵌套子元素写法。

正确用法示例 #

import { Head } from '@inertiajs/react';

<Head
  title={title}
  meta={[
    { name: 'description', content: 'description' },
    { name: 'author', content: 'author' },
  ]}
  link={[
    { rel: 'shortcut icon', href: icon },
  ]}
/>

关键参数说明 #

• title：直接传入字符串类型的页面标题
• meta：数组格式，每个元素是包含头部元信息的对象，支持name/content、property/content（用于Open Graph）、charSet等字段
• link：数组格式，每个元素是包含链接类头部信息的对象，支持rel、href等标准<link>标签属性

扩展配置示例（如添加charset、viewport） #

<Head
  title={title}
  meta={[
    { charSet: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1.0' },
    { name: 'description', content: 'description' },
    { name: 'author', content: 'author' },
  ]}
  link={[
    { rel: 'shortcut icon', href: icon },
    { rel: 'stylesheet', href: '/css/app.css' },
  ]}
/>

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