跳到主要内容

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
✔️✔️✔️