React Routerでページタイトルをloaderのデータにする方法
React Router v7にて、「loaderで取得したデータ」を使って「ページタイトル」を設定する方法を解説します。
設定方法
metaのdataから受け取って、titleに設定します。metaの型をMetaFunction<typeof loader>にすると型情報を持ってこれます。
import type { LoaderFunctionArgs, MetaFunction } from "react-router";
export const loader = async ({ params }: LoaderFunctionArgs) => { // 取得ロジックなど return { name };};
export const meta: MetaFunction<typeof loader> = ({ data }) => { return [ { title: data.name }, { name: "description", content: `${data.name}ページです。` }, ];};ページタイトルにサイト名を入れたい場合
ページ名 | サイト名のようにページタイトルの後ろにサイト名を入れたい場合、自分でformatするユーティリティ関数を作り、こいつを使いまわします。
export const SITE_NAME = "サイト名";
export function formatTitle(pageTitle: string) { return `${pageTitle} | ${SITE_NAME}`;}import { formatTitle } from "./utils"
const pageName = "テスト";export function meta() { return [ { title: formatTitle(pageName) }, { name: "description", content: `${pageName}ページです。` }, ];}noindexとかもmetaで設定
ついでに。お問い合わせページとかだけnoindexにしたいときもmetaタグなのでmetaに書きます。
const pageName = "お問い合わせ";export function meta() { return [ { title: pageName }, { name: "description", content: `${pageName}ページです。` }, { name: "robots", content: "noindex" }, ];}公式ドキュメント集
以上、React Router v7におけるページタイトルの設定方法でした。