跳至主要内容

<RecoilURLSync>

来自 Recoil 同步库 的组件，使用 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 中的位置，回调可能会被调用单个值或包含多个值的 object。诸如 <RecoilURLSyncJSON> 和 <RecoilURLSyncTransit> 之类的包装器为您提供了这些功能。

浏览器抽象​

默认情况下 <RecoilURLSync> 将直接与浏览器中的 URL 同步。但是，您可以通过提供自定义浏览器接口实现来覆盖它。如果您可能在服务器端渲染 (SSR) 环境中执行，这一点也很重要。

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