<RecoilURLSync>

一個元件來自 Recoil Sync library 用來透過 syncEffect() 或 urlSyncEffect() 原子效應與瀏覽器 URL 同步。

---

function RecoilURLSync(props: {
  storeKey?: string,

  location: LocationOption,

  serialize: mixed => string,
  deserialize: string => mixed,

  browserInterface?: BrowserInterface,
  children: React.Node,
}): React.Node

storeKey 用來配對哪些原子應該與這個外部儲存同步。

URL 位置

location 屬性指定哪一部份的 URL 要同步

type LocationOption =
  | {part: 'href'}
  | {part: 'hash'}
  | {part: 'search'}
  | {part: 'queryParams', param?: string};

• queryParams 沒有 param - 原子與個別的查詢參數同步
• queryParams 有 param - 原子在單一的查詢參數中編碼
• search - 狀態與整個查詢搜尋字串編碼
• hash - 狀態在錨點標籤中編碼
• href - 逸出以編碼整個 URL。必須小心提供一個有效且合法的 URL。

範例

請參閱 URL 持久化指南 以取得範例。

自訂序列化

serialize() 和 deserialize() 回呼可以提供自訂序列化

  serialize: x => JSON.stringify(x),
  deserialize: x => JSON.parse(x),

這些回呼應透過類似 useCallback() 的函式來備忘，以避免在每次重新整理時重新剖析 URL。根據 URL 中與其同步的位置，回呼可能會以個別值或包含多個值的物件呼叫。包裝器，例如 <RecoilURLSyncJSON> 和 <RecoilURLSyncTransit> 為您提供這些功能。

瀏覽器抽象

預設情況下，<RecoilURLSync> 會直接與瀏覽器中的 URL 同步。但是，您可透過提供自訂瀏覽器介面實作來覆寫這項行為。如果您需要在伺服器端渲染 (SSR) 環境中執行，也一定要提供這項功能。

type BrowserInterface = {
  replaceURL?: string => void,
  pushURL?: string => void,
  getURL?: () => string,
  listenChangeURL?: (handler: () => void) => (() => void),
};