跳到主要内容

路由

小程序端路由相关概念基本与指南-路由章节保持一致(不支持布局组件动态路由),以下仅列出小程序端路由的注意点。

路由规则

指南-路由章节提到,ice.js 采用约定式路由。但是对于小程序来说,使用约定式路由会带来无法确定首页的问题(在原生小程序中,app.jsonpages 数组的第一项即被指定为首页)。因此 ice.js 开发小程序时,用户需要在 src/app.tsx 中通过导出 miniappManifest 进行路由的指定,示例如下:

export const miniappManifest = {
routes: [
'index',
'about',
'repo/index',
'repo/preview',
],
};

注意,routes 中的每一项应该与文件在 pages 目录下的实际路径保持一致,且其第一项将作为小程序的首页被加载。

路由跳转

ice.js 小程序通过 Link 组件(底层即小程序原生 navigator 组件),来提供路由间的跳转能力。其接受的 to 参数与 Web 端约定式路由产生的 url 保持一致。

src/pages/index.tsx
import { Link } from 'ice';

export default function Home() {
return (
<>
<div>Hello ICE</div>
<Link to="/about">about ice</Link>
</>
);
}

API 形式

  1. 通过 ice.js 提供的 history 能力,你可以实现小程序端的路由跳转:
import { history } from 'ice';

export function historyPush (link: string) {
history.push(link);
}
警告

在应用入口 src/app.ts 导入使用时,由于 history 还未完成初始化创建,不能以立即执行的方式使用。推荐以上述方式封装后在必要的时候进行调用。

  1. 小程序原生的路由相关 API 也可以正常使用。以阿里小程序为例:
my.navigateTo({ url: '/pages/repo/index' });

注意,url 参数必须与页面实际路径保持一致。

路由参数获取

对应小程序原生页面 onLoad 方法的参数,可以使用 useSearchParams 获取:

import { useParams } from 'ice';

// 路由规则 /home?uid=1234
export default function Home() {
const [searchParams] = useSearchParams();
// searchParams 输出内容为 { uid: '1234'}

return (
<>
<h2>Home Page</h2>
</>
);
}