跳到主要内容

useRouter

路由相关, 扩充 Taro useRouter , 并融合跳转小程序 api

何时使用​

当需要获取路由，或者进行路由以及小程序跳转操作时

API​

const [
  routerInfo,
  { navigate, switchTab, relaunch, redirect, back, exit, preload },
] = useRouter<R extends RecordData, S extends RecordData = RecordData>();

参数说明​

无

返回值说明​

返回值说明类型
routerInfo当前页面路由信息Route<R>
navigate打开到应用内的某个页面RouteNavigate<R>
switchTab异步跳转 tabBar 页面SwitchTab
relaunch异步关闭当前页面，跳转到应用内的某个页面RouteNavigate<R>
redirect异步保留当前页面，跳转到应用内的某个页面或跳转至小程序RouteNavigate<R>
back异步关闭当前页面，返回上一页面或多级页面或返回小程序Back
exit异步关闭小程序Exit
preload跳转预加载 APIPreload

Route​

export type Route<
  R extends Partial<RecordData>,
  S extends RecordData = RecordData,
> = RouterInfo<R> & {
  from: ReturnType<typeof useFrom>;
} & {
  preloadData: S;
};

RouteNavigate​

type RouteNavigate<R> = PromiseParamsAction<RouteOption<R>>;

SwitchTab​

type SwitchTab = PromiseAction<string>;

Back​

type Back = PromiseParamsAction<RouteBackOption>;

Exit​

type Exit = PromiseWithoutOptionAction;

Preload​

/**
 * 跳转预加载 API
 * @param options 预加载的数据
 * @example
 * ```tsx
 * Taro.preload({ key: 'value' })
 * ```
 */
preload (options: Record<string, any>)

/**
 * 跳转预加载 API
 * @param key 预加载的数据 key
 * @param value 预加载的数据 value
 * @example
 * ```tsx
 * Taro.preload('key', 'value')
 * ```
 */
preload (key: string, value: any)

代码演示​

Hook 支持度​

微信小程序H5ReactNative
✔️✔️✔️