---
title: "useLocationSelector 用法與示例"
description: "有選擇地從 `location` 檢索屬性。 僅當您返回的值更改時，此 Hook 才會重新渲染。 有關更多信息，請參閱（https://thisweekinreact.com/articles/useSyncExternalStore-the-undererated-react-api）。"
canonical: https://reactuse.com/zh-Hant/browser/uselocationselector/
---

# useLocationSelector

有選擇地從 `location` 檢索屬性。 僅當您返回的值更改時，此 Hook 才會重新渲染。
有关更多信息，请参阅（https://thisweekinreact.com/articles/useSyncExternalStore-the-undererated-react-api）

`useLocationSelector` 使用選擇器模式從 `window.location` 中提取衍生值，僅在選擇器結果變更時重新渲染。它接受一個選擇器函式和一個可選的後備值（用於 SSR），並回傳選擇器的當前輸出。此 hook 監聽導航事件以保持值更新。

### 使用場景

- 從 URL 中提取特定部分（如路徑名、搜尋參數或雜湊值）以最小化不必要的重新渲染
- 建構根據 URL 的衍生值做出反應的路由感知元件
- 追蹤 URL 的特定部分而不訂閱整個 location 物件

### 注意事項

- **SSR 安全**：接受一個 `fallback` 參數，在 `window.location` 不可用的伺服器端渲染時回傳。
- **選擇性重新渲染**：與直接讀取 `window.location` 不同，選擇器模式確保你的元件僅在衍生值變更時才重新渲染。
- **瀏覽器事件**：監聽 `window` 上的 `popstate` 事件以偵測前進/後退導航。雜湊變更和 `pushState`/`replaceState` 呼叫也會被追蹤。

## Usage

```tsx live noInline

function CurrentPathname() {
  const pathname = useLocationSelector(location => location.pathname);
  const ref = useRef(0);

  useEffect(() => {
    ref.current = ref.current + 1;
  });
  return (
    <div>
      {pathname}
      <div>渲染次數：{ref.current}</div>
    </div>
  );
}

function CurrentHash() {
  const hash = useLocationSelector(location => location.hash || "無哈希");
  const ref = useRef(0);

  useEffect(() => {
    ref.current = ref.current + 1;
  });
  return (
    <div>
      {hash}
      <div>哈希渲染：{ref.current}</div>
    </div>
  );
}

function Links() {
  return (
    <div>
      <a href="#link1">#link1</a>
      <a href="#link2">#link2</a>
      <a href="#link3">#link3</a>
    </div>
  );
}

function Demo() {
  return (
    <div>
      <CurrentPathname />
      <CurrentHash />
      <Links />
    </div>
  );
}

render(<Demo/>)
```

%%API%%