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';; E8 y' ~2 g) |8 b* C& n" x
import { onCleanup } from 'solid-js';1 T5 x" j; z! o* u5 Y- L+ c. u
import { initNavigator } from '@telegram-apps/sdk-solid';
/ E8 }, ]* ^! J, r
import { createRouter } from '@telegram-apps/solid-router-integration';
4 m& Q% x* l+ z% n, c& O3 \" T
* Q6 _; n) l% c6 Z( l. p/ ?
import { IndexPage } from './IndexPage.js';1 l4 W0 L H# X L" {. L
, K! P; g& C b9 C* H
function App() {* H/ R- M6 m/ p, |0 K- x. P$ s) g
// We should create navigator to pass it to integration creation.
; Z! t) U6 N4 |2 _ Z" q5 N; g
const navigator = initNavigator('app-navigator-state');1 Q- i, k r' C- y- B
# ]! a5 @3 S5 D) k' p4 [; a1 w9 v2 T
// Then, to allow this navigator update current browser history,
, e& W# U; X7 k8 K& A
// we should attach it. Otherwise, it will work in memory mode.. Q% a' y+ b% K- B) k( q7 U
void navigator.attach();
0 i: w, C2 H7 j
onCleanup(() => {
: l# I$ u6 Y7 y& a4 g* y& `& ^6 h
navigator.detach();
E7 E" A6 b& |0 q( E+ ?
});
) q. ?( m+ m! q+ c
) M9 A: H( f5 N: ~3 f
const Router = createRouter(navigator);6 a- r0 Y: ~! Y$ F
) z y! H0 Y4 H& l$ X
return (0 U: N N1 u9 S& q! D0 J/ g5 z
<Router>$ T0 u* i8 F: q5 Y* D" i$ m' |2 S
<Routes>
8 b. n$ l4 K1 `3 f! ~
<Route path={'/'} component={IndexPage}/>
; w) f5 j. f$ {# ^0 }9 w8 Q
<Route path={'*'} element={<Navigate href={'/'}/>}/>
1 S5 e9 U- a2 S2 Q- F' s
</Routes>
8 w9 G3 @" T: n$ o9 t2 P
</Router># Z! w0 B3 v- h7 N& N4 N2 ?
);: J; J$ B0 P3 f% Y r
}

复制代码

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