React で <title> をいじる方法
Reactで<title>を変更する方法。
Before
export interface TitleProps {
children: string
}
export function Title(props: TitleProps): JSX.Element {
useEffect(() => {
document.title = props.children
}, [])
return <></>
}
// 使い方
<Component>
<Title>ここにタイトルを設定</Title>
</Component>
After: React19で追加予定の<title>コンポーネント
<title>コンポーネントが公式に追加されるdocument.titleをいじる必要がなくなる
<Component>
<title>ここにタイトルを設定</title>
</Component>
// ↓↓↓
<head>
<title>ここにタイトルを設定</title>
</head>
<body>
...
</body>