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';/ Z, }: ?( k9 j! |: ], H
import { onCleanup } from 'solid-js';
+ {5 H% K/ i6 O; d$ r0 B
import { initNavigator } from '@telegram-apps/sdk-solid';7 a2 J) B: e, _
import { createRouter } from '@telegram-apps/solid-router-integration';
) I) n% }5 Y( O
- W! {2 i% N$ A1 I: |2 y6 S1 P
import { IndexPage } from './IndexPage.js';" t. ]- e: E; ]. L# K& @- Q
9 Y! r' t& l; _# n: d2 S9 e2 {
function App() {, J6 a, v: n1 A& `. g) t1 r
// We should create navigator to pass it to integration creation.( u( g9 t) | @* N- U9 h: n
const navigator = initNavigator('app-navigator-state');: \. G ]& _# D
5 x ]* z$ J$ w
// Then, to allow this navigator update current browser history,
/ ~1 m# u1 D0 X, |$ ?' M7 ?& N
// we should attach it. Otherwise, it will work in memory mode.
. M. `" z2 n; P/ D( q6 [) f9 L
void navigator.attach();
# q( M9 P& w7 q0 w# z/ ]2 ]- N
onCleanup(() => {1 k$ ^+ a# G( z* A+ ~
navigator.detach();, S. N" }0 N) O' }+ V6 j# J" L
});
: r0 N7 j8 Q3 n( `& M! i2 k
4 n" Y0 k. Y f- ?$ K+ E
const Router = createRouter(navigator);9 i% F% }& ?' q$ g# v! L
$ J+ v/ n& R9 @! j, {6 B: x
return (
R: ]; V/ V5 a4 C: Z8 i
<Router>
' u4 {6 J) I7 i8 L" v
<Routes>
! n6 \( m L- x% [: K, P4 S
<Route path={'/'} component={IndexPage}/>! i6 z, P$ Y2 l# j Y
<Route path={'*'} element={<Navigate href={'/'}/>}/>
+ ~' Y9 T5 Y; y. q
</Routes>5 \. a) A1 C& B% [+ ?
</Router>( r1 _7 @) \* g+ Y; H
);
/ H, m$ y% ]* u
}

复制代码

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