---
title: "useTitle 用法與示例"
description: "設置文檔標題。"
canonical: https://reactuse.com/zh-Hant/browser/usetitle/
---

# useTitle

設置文檔標題。

`useTitle` 動態設定 `document.title`，在瀏覽器分頁中更新顯示的頁面標題。傳入一個標題字串，hook 會立即設定它。這是一個即發即忘的副作用——它接受標題字串並設定它。

### 使用場景

- 根據當前路由或頁面狀態動態更新頁面標題
- 在頁面標題中顯示未讀通知數量
- 為單頁應用程式中的不同視圖設定描述性標題

### 注意事項

- **SSR 安全**：此 hook 在伺服器端渲染時為空操作。伺服器上不會存取 `document.title`。對於 SSR，請在 HTML 模板中設定標題或使用 head 管理方案。
- **簡單 API**：此 hook 是一個即發即忘的副作用——它接受標題字串並設定它。對於更複雜的場景（例如在卸載時恢復前一個標題），請相應地進行封裝。
- **相關 hooks**：另請參閱 `useFavicon` 用於動態更改頁面的網站圖示。

## Usage

```tsx live

function Demo() {
  const [title, setTitle] = useState("標題");

  useTitle(title);

  return (
    <div>
      <button onClick={() => setTitle("新標題")}>更改標題</button>
    </div>
  );
};

```

%%API%%