Telegram 小程序 | TypeScript @telegram-apps/solid-router-integration

riyad

Telegram Mini Apps Navigator 和 @solidjs/router 的集成。

安装
pnpm :

复制代码

npm :

复制代码

yarn :

复制代码

使用方法

目前，该软件包只提供了一个函数，用于创建 @solidjs/router 路由器的集成 - createRouter。

下面是它的使用方法：

import { Routes, Route, Navigate } from '@solidjs/router';
) e) u0 }/ H/ _ V
import { onCleanup } from 'solid-js';" g" b7 R% e' R8 G- B
import { initNavigator } from '@telegram-apps/sdk-solid';
h, p2 z9 V" x
import { createRouter } from '@telegram-apps/solid-router-integration';
% {4 z% B4 {5 e# [8 s! C
% Z+ D+ I0 r9 m b
import { IndexPage } from './IndexPage.js';& o5 B: c0 m8 e2 ^8 y/ J; O4 `3 f: `
9 Z$ n- M/ r2 f) t: ?
function App() {
o7 V o( |3 v/ m
// We should create navigator to pass it to integration creation.6 h; Q: N5 F; }4 T' ]* b, k
const navigator = initNavigator('app-navigator-state');
( H8 y D. {( H7 Q& I% I+ ~
- U# i8 y& `$ T; i! {
// Then, to allow this navigator update current browser history, 6 c! J1 [. b9 s4 L' W% _: w0 t6 Y; T
// we should attach it. Otherwise, it will work in memory mode.( e$ Y1 I8 m6 `" o
void navigator.attach();
+ n- n2 g% \0 r! |- L* {7 }# G
onCleanup(() => {
}7 M. q2 F7 r- T Z/ O" O- Y$ m
navigator.detach();9 u6 O! J6 D, ^$ h7 |0 g. i, ^ ~! }: |
});
5 L" ~% i* Y4 h3 P2 {0 k
) b! B5 z2 G7 X( x, t
const Router = createRouter(navigator);3 u* s' W0 z; `; M# ^
3 \) B# ^* K2 M! q% b3 z1 C
return (
4 D- y* u5 G. g' H/ {
<Router>
* q# t4 c& y% g+ Y) N0 e
<Routes>3 T' v$ {+ D' k+ @
<Route path={'/'} component={IndexPage}/>
8 J2 {' n' H N+ ^* V
<Route path={'*'} element={<Navigate href={'/'}/>}/>+ N3 d g. `# p) r7 J
</Routes>
2 K X. B: S4 o
</Router>
6 e5 C; _/ M, K1 O/ S5 k0 z
);
% V% _# V( }$ B$ L* Q4 B d9 O
}

复制代码

您可以通过我们的 Solid 模板了解更多有关如何使用它的实际应用。