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';% K" [8 X% T+ h; N; N# ^4 ~
import { onCleanup } from 'solid-js';) @; I: E" X, A. W+ G3 W+ N/ @
import { initNavigator } from '@telegram-apps/sdk-solid';
1 [) d6 E3 M. N7 C4 I- G# |9 l) C
import { createRouter } from '@telegram-apps/solid-router-integration';
" u, D4 q! L9 h8 i4 J2 `. [* J
H( v& F& p0 l8 J E
import { IndexPage } from './IndexPage.js';
; q: Y) M+ x0 K2 Y0 ~6 X! G
4 X8 R P9 S% x
function App() {
+ m( O% O; a- Q# a) ~$ e" A$ k* ^
// We should create navigator to pass it to integration creation.
* _8 P. v7 v$ k r. I
const navigator = initNavigator('app-navigator-state');
- v: q. r* h( P- N, W
3 b% }9 m+ A/ E& b4 y$ a0 O
// Then, to allow this navigator update current browser history,
( Q& [9 z/ t, f* A/ U' K7 U# i
// we should attach it. Otherwise, it will work in memory mode.
2 c6 I2 ]% F R0 ?$ f, L
void navigator.attach();: J: m4 z( X* D, ^5 q' H! i
onCleanup(() => {7 s8 f) T8 i1 d" T8 f
navigator.detach();; ` p, {! W5 ~# A$ s
});6 ^; k0 y7 r e1 _- K
& S, [' F0 s" d0 {' U8 ~
const Router = createRouter(navigator);
8 ~! g5 c$ `! [
9 R# x7 o+ t$ P4 q7 K
return (
6 x4 a6 n3 ?2 C1 V2 T3 B, ~
<Router>
7 a! B6 A4 ^$ J% z8 n
<Routes>
6 L% `9 g1 N, b! p8 e1 |" f% c
<Route path={'/'} component={IndexPage}/>" P, u7 K$ z% i1 U4 g* X; ?
<Route path={'*'} element={<Navigate href={'/'}/>}/>. Q( A& k$ M" ~1 j; i
</Routes>
" s3 c$ M6 ?) h+ m. P7 |7 t
</Router>
8 i& Z- Z2 O. _3 H
);
6 t9 H* V9 T( v6 Q/ }3 w* Q# ~
}

复制代码

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