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';
; B8 V% c7 B# s0 E- a% B
import { onCleanup } from 'solid-js';
1 J! s# C, h) ?" W7 D
import { initNavigator } from '@telegram-apps/sdk-solid';8 _( c Z. C" ~
import { createRouter } from '@telegram-apps/solid-router-integration';
0 ?% b! K0 b0 h) m6 C6 l7 ^
* r* e# j% C" T6 l
import { IndexPage } from './IndexPage.js';1 |6 O. A, k7 v5 j' z# \
# m7 q: E. P1 a1 D! ]! z! q! d
function App() {
s# G' e5 t+ l
// We should create navigator to pass it to integration creation.* r' q1 {5 h; _/ n6 c
const navigator = initNavigator('app-navigator-state');+ M3 y: J3 |$ y# w$ y' f6 l
T! k2 E; f1 l1 t
// Then, to allow this navigator update current browser history, & Q& u; p& j6 w' T0 P: z2 V
// we should attach it. Otherwise, it will work in memory mode.2 P9 Y: ^; J3 O; g0 p! ]
void navigator.attach();
- h8 @) N9 E- P' }$ P ~' C
onCleanup(() => {) {( o3 I- V. i0 ^' |5 g
navigator.detach();
4 j' K5 N7 S. g' M7 ~; [$ s# o, [. T
});
0 H3 y# v# P2 z% t
) F) R+ m9 g# a- `6 n
const Router = createRouter(navigator);7 u) d) g" Q, d5 x1 M
9 S' T- C# r: ^+ c# k
return (& ^. f- c0 R+ D
<Router>
, T; y& G+ b- R0 x) f6 Y
<Routes>$ a% X2 b4 K1 _
<Route path={'/'} component={IndexPage}/>
/ |( S/ t8 J0 V4 f1 w3 R/ m1 `
<Route path={'*'} element={<Navigate href={'/'}/>}/>
9 o# r0 o0 n o0 D+ _
</Routes>( s9 l2 Z. T" l n' j
</Router>5 m# x! R1 X5 W/ D5 I" S- B! i
);
& W( t' \- k: I) w" y9 r1 A
}

复制代码

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