---------------------- # Changing Page Titles in Refine There are two main approaches to dynamically change page titles in Refine: ## 1. Using the DocumentTitleHandler Component The `DocumentTitleHandler` component allows you to customize document titles globally: ```jsx import { BrowserRouter, DocumentTitleHandler } from "@refinedev/react-router"; import { Refine } from "@refinedev/core"; const App = () => { return ( {/* ... */} { const id = params?.id ?? ""; const actionPrefixMatcher = { create: "Create new ", clone: `#${id} Clone ${resource?.meta?.label}`, edit: `#${id} Edit ${resource?.meta?.label}`, show: `#${id} Show ${resource?.meta?.label}`, list: `${resource?.meta?.label}`, }; const suffix = " | "; const title = actionPrefixMatcher[action || "list"] + suffix; return title; }} /> ); }; ``` This approach is documented in both [React Router integration]() and [Next.js integration](). ## 2. Using the useDocumentTitle Hook For more granular control at the component level, you can use the `useDocumentTitle` hook: ```jsx import { useDocumentTitle } from "@refinedev/react-router"; const PostList = () => { useDocumentTitle("Posts | Refine"); return {/* ... */}; }; ``` The hook can also be used with i18n: ```jsx useDocumentTitle({ i18nKey: "documentTitle.posts.list" }); ``` Or dynamically:

How to change page title ?

Similar Threads

Similar Threads

Similar Threads